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

【SCSS】网格布局中的动画

news 2025/7/7 22:36:49

效果

在这里插入图片描述

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

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。具体可参…...

编程新知 2025/6/15 20:37:19

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明在2011版本的gb28181协议中，拉取视频流只要求udp方式，从2016开始要求新增支持tcp被动和tcp主动两种方式，udp理论上会丢包的，所以实际使用过程可能会出现画面花屏的情况，而tcp肯定不丢包，起码…...

编程新知 2025/7/6 3:45:35

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2025/7/6 12:26:27

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...

编程新知 2025/7/5 16:03:22

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...

编程新知 2025/6/16 13:45:11

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类二者共有的常见方法方法功能add加subtract减multiply乘divide除注意点：传参类型必须是类对象一、BigInteger 1. 作用：适合保存比较大的整型数 2. 使用说明创建BigInteger对象传入字符串 3. 代码示例 import j…...

编程新知 2025/6/21 16:56:20

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）专栏介绍：《编程项目实战》目录一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/6/16 21:02:04

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2025/6/21 15:09:46

Kubernetes 节点自动伸缩（Cluster Autoscaler）原理与实践

在 Kubernetes 集群中，如何在保障应用高可用的同时有效地管理资源，一直是运维人员和开发者关注的重点。随着微服务架构的普及，集群内各个服务的负载波动日趋明显，传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...

编程新知 2025/7/5 8:31:00

Linux 下 DMA 内存映射浅析

序系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存，但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。关于 dma_alloc_coherent 接口详细的代码讲解、调用流程，可以参考这篇文章，我觉得写的非常…...

编程新知 2025/7/5 10:34:47

效果

index.html

index.scss

index.css

相关文章：