当前位置：首页 > news >正文

【SCSS】网格布局中的动画

news 文章来源：https://blog.csdn.net/chenlu5201314/article/details/132047432 2025/5/15 9:12:42

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html><head><title> Document </title><link type="text/css" rel="styleSheet" href="index.css" /></head><body><div class="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div></body>
</html>

index.scss

在vs code 中使用Live Sass Compiler自动编译scss文件。

body {background: #23262d;
}
.container {width: 400px;height: 400px;margin: 0 auto;margin-top: 50px;//以网格显示display: grid;//自定义css变量--c1: 1fr;--c2: 1fr;--c3: 1fr;--r1: 1fr;--r2: 1fr;--r3: 1fr;//设置列数和宽度grid-template-columns: var(--c1) var(--c2) var(--c3);//设置行数和高度grid-template-rows: var(--r1) var(--r2) var(--r3);//平滑过渡网格单元尺寸变化transition: 0.5s;// 每个格子间距grid-gap: 10px;
}@for $i from 0 to 9 {//变量每个ITEM.item:nth-child(#{$i + 1}) {//使用色相环对每个格子设置不同的颜色background: hsl($i * 40%, 100%, 64%);}//判断container元素内部item是否触发hover事件.container:has(.item:nth-child(#{$i + 1}):hover) {//计算行号$r: floor($i/3) + 1;//计算列号$c: $i%3 + 1;//对相应css 行变量设置宽度--r#{$r}: 2fr;//对相应css 列变量设置高度--c#{$c}: 2fr;}
}

transition: 0.5s;平滑过渡单元格的尺寸变化，解决鼠标移动画面切换的卡顿问题
grid-gap: 10px;设置格子的间距
grid-template-columns: var(--c1) var(--c2) var(--c3);使用自定义变量设置格子的列数和宽度
grid-template-rows: var(--r1) var(--r2) var(--r3);使用自定义变量设置格子的行数和高度
--c1: 1fr;第一列的宽度
--c2: 1fr;第二列的宽度
--c3: 1fr;第三列的宽度
--r1: 1fr;第一行的宽度
--r2: 1fr;第二行的宽度
--r3: 1fr;第三行的宽度
$r: floor($i/3) + 1; sass变量行号
$c: $i%3 + 1; sass变量列号
background: hsl($i * 40%, 100%, 64%);使用sass变量$i与色相环hsl对每个格子设置不同的背景颜色

index.css

此文件由index.scss文件自动编译生成

body {background: #23262d;
}.container {width: 400px;height: 400px;margin: 0 auto;margin-top: 50px;display: grid;--c1: 1fr;--c2: 1fr;--c3: 1fr;--r1: 1fr;--r2: 1fr;--r3: 1fr;grid-template-columns: var(--c1) var(--c2) var(--c3);grid-template-rows: var(--r1) var(--r2) var(--r3);transition: 0.5s;grid-gap: 10px;
}.item:nth-child(1) {background: hsl(0, 100%, 64%);
}.container:has(.item:nth-child(1):hover) {--r1: 2fr;--c1: 2fr;
}.item:nth-child(2) {background: hsl(40, 100%, 64%);
}.container:has(.item:nth-child(2):hover) {--r1: 2fr;--c2: 2fr;
}.item:nth-child(3) {background: hsl(80, 100%, 64%);
}.container:has(.item:nth-child(3):hover) {--r1: 2fr;--c3: 2fr;
}.item:nth-child(4) {background: hsl(120, 100%, 64%);
}.container:has(.item:nth-child(4):hover) {--r2: 2fr;--c1: 2fr;
}.item:nth-child(5) {background: hsl(160, 100%, 64%);
}.container:has(.item:nth-child(5):hover) {--r2: 2fr;--c2: 2fr;
}.item:nth-child(6) {background: hsl(200, 100%, 64%);
}.container:has(.item:nth-child(6):hover) {--r2: 2fr;--c3: 2fr;
}.item:nth-child(7) {background: hsl(240, 100%, 64%);
}.container:has(.item:nth-child(7):hover) {--r3: 2fr;--c1: 2fr;
}.item:nth-child(8) {background: hsl(280, 100%, 64%);
}.container:has(.item:nth-child(8):hover) {--r3: 2fr;--c2: 2fr;
}.item:nth-child(9) {background: hsl(320, 100%, 64%);
}.container:has(.item:nth-child(9):hover) {--r3: 2fr;--c3: 2fr;
}/*# sourceMappingURL=index.css.map */

【SCSS】网格布局中的动画

效果 index.html <!DOCTYPE html> <html><head><title> Document </title><link type"text/css" rel"styleSheet" href"index.css" /></head><body><div class"container">&l…...

编程日记 2023/8/1 19:09:53

Docker基础命令(一)

Docker使用1 一、运行终端打开终端，输入docker images ，如果运行正常，表示docker已经可以在本电脑上使用了二、docker常用命令指令说明docker images查看已下载的镜像docker rmi 镜像名称:标签名删除已下载的镜像docker search 镜像从官…...

编程日记 2023/8/1 19:08:52

django4.2 day1Django快速入门

1、创建虚拟环境打开cmd安装virtualenv pip install virtualenvwrapper-winworkon 查看虚拟环境mkvirtualenv 创建新的虚拟环境删除虚拟环境 rmvirtualenv 进入虚拟环境 workon env 2、创建django虚拟环境并安装django 创建虚拟环境mkvirtualenv django4env进入虚拟环境安…...

编程日记 2023/8/1 19:07:50

linux的exec和system函数介绍及选择

在应用程序中有时候需要调用第三方的应用，这是常见的需求。此时可以使用linux下的exec命令或system命令达到目的。但是这两个该选择哪个呢？有什么区别？下面总结介绍下。 exec和system介绍在Linux中，exec命令用于在当前进程中执行…...

编程日记 2023/8/1 19:06:49

150行代码写一个Qt井字棋游戏

照例先演示一下: QT井字棋游戏，可以悔棋。会在鼠标箭头处跟随一个下棋方的小棋子图标。棋盘和棋子是自己画的，可以自行在对应的代码处更换自己喜欢的图片，不过要注意尺寸兼容。以棋会友： 井字棋最关键的就是下棋了&#xf…...

编程日记 2023/8/1 19:05:48

k8s概念-controller

Controller作用和分类 controller用于控制pod 参考: 工作负载资源 | Kubernetes 控制器主要分为: Deployments 部署无状态应用，控制pod升级,回退 ReplicaSet 副本集,控制pod扩容,裁减 ReplicationController(相当于ReplicaSet的老版本,现在建议使用Deployments…...

编程日记 2023/8/1 19:04:46

Gis入门，根据起止点和一个控制点计算二阶贝塞尔曲线（共三个控制点组成的线段转曲线）

前言本章讲解如何在gis地图中使用起止点和一个控制点（总共三个控制点）生成二阶贝塞尔曲线。三阶贝塞尔曲线请参考下一章《Gis入门，使用起止点和两个控制点生成三阶贝塞尔曲线（共四个控制点）》贝塞尔曲线（Bezier curve）介绍贝塞尔曲线（Bezier curve）是一种数学…...

编程日记 2023/8/1 19:03:45

第1集丨Vue 江湖 —— Hello Vue

目录一、简介1.1 参考网址1.2 下载二、Hello Vue2.1 创建页面2.2 安装Live Server插件2.4 安装 vue-devtools2.5 预览效果一、简介 Vue（读音 /vjuː/, 类似于 view） 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设…...

编程日记 2023/8/1 19:02:44

PCB制版技术

1、在头脑里形成一个原理图----现在就下载AD9盖版，诞生了一个问题，电路板去哪里买，买了怎么焊接电路和芯片，怎样流程化批量制作电子产品 1.1 形成一个PCB板，形成一个结构 1.2 焊接，嫁接，组装等 …...

编程日记 2023/8/1 19:01:43

大数据课程E7——Flume的Interceptor

文章作者邮箱：yugongshiyesina.cn 地址：广东惠州 ▲ 本章节目的 ⚪ 了解Interceptor的概念和配置参数； ⚪ 掌握Interceptor的使用方法； ⚪ 掌握Interceptor的Host Interceptor； ⚪ 掌握Interceptor的…...

编程日记 2023/8/1 19:00:42

P2P网络NAT穿透原理(打洞方案)

1.关于NAT NAT技术（Network Address Translation，网络地址转换）是一种把内部网络（简称为内网）私有IP地址转换为外部网络（简称为外网）公共IP地址的技术，它使得一定范围内的多台主机只…...

编程日记 2023/8/1 18:59:41

Gof23设计模式之桥接外观模式

1.概述又名门面模式，是一种通过为多个复杂的子系统提供一个一致的接口，而使这些子系统更加容易被访问的模式。该模式对外有一个统一接口，外部应用程序不用关心内部子系统的具体的细节，这样会大大降低应用程序的复杂度&#xff0…...

编程日记 2023/8/1 18:58:39

微服务性能分析工具 Pyroscope 初体验

Go 自带接口性能分析工具 pprof，较为常用的有以下 4 种分析： CPU Profiling: CPU 分析，按照一定的频率采集所监听的应用程序 CPU（含寄存器）的使用情况，可确定应用程序在主动消耗 CPU 周期时花费时间的位置…...

编程日记 2023/8/1 18:57:38

工作记录------单元测试（持续更新）

工作记录------单元测试之前的工作中从来没有写过单元测试，新入职公司要求写单元测试， 个人觉得，作为程序员单元测试还是必须会写的于此记录一下首次编写单元测试的过程。首先引入单元测试相关的依赖 <dependency><groupId>…...

编程日记 2023/8/1 18:56:38

C#再windowForm窗体中绘画扇形并给其填充颜色 Graphics graphics this.CreateGraphics();graphics.SmoothingMode SmoothingMode.AntiAlias;int width this.Width;int height this.Height;h this.Height;w this.Width;Rectangle rct new Rectangle(0 - h / 6, 0 - h / 6…...

编程日记 2023/8/1 18:55:37

MBA拓展有感-见好就收，还是挑战到底？MBA拓展有感-见好就收，还是挑战到底？

今天看到新闻提到某位坚持了14年高考的同学滑档，让人心生感叹：无论在日常工作还是生活中，选择都是非常重要的。不由想起前段时间我参加研究生新生拓展时的一些感悟，和大家分享一下。事情的起因是拓展活动中的一个分队竞技类的活…...

编程日记 2023/8/1 18:54:35

综合布线系统光缆分类及其特点？

综合布线系统光缆是一种用于数据传输和通信的电缆，常用于建筑物内部网络和通信系统的布线。光缆采用光纤作为传输介质，能够以光的形式传输大量数据，具有高带宽、低延迟、抗干扰等特点，适用于高速数据传输和长距离通信需求。光缆…...

编程日记 2023/8/1 18:53:32

前端构建（打包）工具发展史

大多同学的前端学习路线：三件套框架慢慢延伸到其他，在这个过程中，有一个词出现的频率很高：webpack 。作为一个很出名的前端构建工具我们在网上随便一搜，就会有各种教程：loader plugin entry吧啦吧啦。但…...

编程日记 2023/8/1 18:52:31

【数据可视化】（一）数据可视化概述

目录 0.本章节概述一、数据可视化 1、什么是数据可视化？ 2、数据可视化的好处 3、数据可视化的用途二、数据探索 1、数据相关工具的使用情景： 2、探索性查询三、数据挑战 1、什么是数据挑战？...

编程日记 2023/8/1 18:51:30

GoogleLeNet Inception V2 V3

文章目录卷积核分解第一步分解，对称分解第二步分解，非对称分解在Inception中的改造一般模型的参数节省量可能导致的问题针对两个辅助分类起的改造特征图尺寸缩减Model Regularization via Label Smoothing——LSR问题描述，也就是LSR解决什么…...

编程日记 2023/8/1 18:50:29

【css】背景图片附着

属性：background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）。 background-attachment: fixed：为固定； background-attachment: scroll为滚动代码： <!DOCTYPE h…...

编程日记 2023/8/1 18:49:28

解决运行flutter doctor --android-licenses时报错

问题描述： 配置flutter环境时，会使用flutter doctor命令来检查运行flutter的相关依赖是否配好。能看到还差 Android license status unknown.未解决。 C:\Users\ipkiss.wu>flutter doctor Flutter assets will be downloaded from https://storage.…...

编程日记 2023/8/1 18:48:26

在使用Python爬虫时遇到503 Service Unavailable错误解决办法汇总

在进行Python爬虫的过程中，有时会遇到503 Service Unavailable错误，这意味着所请求的服务不可用，无法获取所需的数据。为了解决这个常见的问题，本文将提供一些解决办法，希望能提供实战价值，让爬虫任务顺利完…...

编程日记 2023/8/1 18:47:25

小研究 - 主动式微服务细粒度弹性缩放算法研究（一）

微服务架构已成为云数据中心的基本服务架构。但目前关于微服务系统弹性缩放的研究大多是基于服务或实例级别的水平缩放，忽略了能够充分利用单台服务器资源的细粒度垂直缩放，从而导致资源浪费。为此，本文设计了主动式微服务细粒度弹性缩放算法…...

编程日记 2023/8/1 18:46:24

【LeetCode】215.数组中的第K个最大元素

题目给定整数数组 nums 和整数 k，请返回数组中第 k 个最大的元素。请注意，你需要找的是数组排序后的第 k 个最大的元素，而不是第 k 个不同的元素。你必须设计并实现时间复杂度为 O(n) 的算法解决此问题。示例 1: 输入: [3,2,1,5,6,4…...

编程日记 2023/8/1 18:45:22

MySQL学习记录：第七章存储过程和函数

文章目录第七章存储过程和函数一、存储过程1、创建语法*2、调用语法（1）空参列表（2）创建带in参数模式的存储过程，需终端运行（3）创建带out参数模式的存储过程，需终端运行（4）创建带inout参数模式的存储过程，需终端运行3、删除存储过程4、查看存储过程的信息二、函数…...

编程日记 2023/8/1 18:44:20

Docker中gitlab以及gitlab-runner的安装与使用

1、本文主要讲述如何使用Docker安装gitlab以及gitlab-runner，并且会讲述gitlab-runner如何使用 2、gitlab部分不需要修改过多的配置即可使用，本文未讲述https配置，如有需求，可自行百度 3、Docker如何安装可以自行百度一、Docker安…...

编程日记 2023/8/1 18:43:19

一起学SF框架系列5.12-spring-beans-数据绑定dataBinding

数据绑定有助于将用户输入动态绑定到应用程序的域模型（或用于处理用户输入的任何对象），主要用于web层，但实际可用于任何层。Spring提供了DataBinder来做到这一点，并提供了Validator进行数据验证，两者组成了…...

编程日记 2023/8/1 18:42:18

火热报名中 | 赛宁独家技术支持第七届“蓝帽杯”网络安全技能大赛

由公安部网络安全保卫局、教育部教育管理信息中心、中国教育协会指导，中国人民公安大学主办，奇安信科技集团股份有限公司协办，南京赛宁信息技术有限公司提供技术支持的2023第七届“蓝帽杯”全国大学生网络安全技能大赛于近日正式开启报名。 …...

编程日记 2023/8/1 18:41:17

无涯教程-jQuery - Ajax Tutorial函数

AJAX是用于创建交互式Web应用程序的Web开发技术。如果您了解JavaScript,HTML,CSS和XML,则只需花费一个小时即可开始使用AJAX。为什么要学习Ajax? AJAX代表 A 同步 Ja vaScript和 X ML。 AJAX是一项新技术,可借助XML,HTML,CSS和Java Script创建更好,更快,更具交互性的Web应用…...

编程日记 2023/8/1 18:40:15

效果

index.html

index.scss

index.css

相关文章：