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

【SCSS】网格布局中的动画

news 2026/2/9 21:51:36

效果

在这里插入图片描述

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

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层将题目图片经过超分、去噪、倾斜校正后，分别用…...

编程新知 2026/2/8 4:32:38

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2026/2/8 20:43:07

PHP和Node.js哪个更爽?

先说结论，rust完胜。 php：laravel，swoole，webman，最开始在苏宁的时候写了几年php，当时觉得php真的是世界上最好的语言，因为当初活在舒适圈里，不愿意跳出来，就好比当初活在…...

编程新知 2025/9/14 7:59:52

EtherNet/IP转DeviceNet协议网关详解

一，设备主要功能疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络，本网关连接到EtherNet/IP总线中做为从站使用，连接到DeviceNet总线中做为从站使用。在自动…...

编程新知 2026/1/31 6:53:51

Linux离线（zip方式）安装docker

目录基础信息操作系统信息docker信息安装实例安装步骤示例遇到的问题问题1：修改默认工作路径启动失败问题2 找不到对应组基础信息操作系统信息 OS版本：CentOS 7 64位内核版本：3.10.0 相关命令： uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用引言随着无人机（无人驾驶飞行器，UAV）技术的快速发展，其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统，无人机的“黑飞”&…...

编程新知 2026/1/26 6:01:03

MySQL：分区的基本使用

目录一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区一、什么是分区 MySQL 分区（Partitioning）是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分（分区）可以独立存储、管理和优化，…...

编程新知 2026/2/2 18:52:32

MySQL 主从同步异常处理

阅读原文：https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主，遇到的这个错误： Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一，通常表示&#xff…...

编程新知 2025/11/7 10:02:17

9-Oracle 23 ai Vector Search 特性知识准备

很多小伙伴是不是参加了免费认证课程（限时至2025/5/15） Oracle AI Vector Search 1Z0-184-25考试，都顺利拿到certified了没。各行各业的AI 大模型的到来，传统的数据库中的SQL还能不能打，结构化和非结构的话数据如何和…...

编程新知 2026/2/7 23:29:43

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

编程新知 2026/1/20 13:43:41

效果

index.html

index.scss

index.css

相关文章：