【SCSS】网格布局中的动画

news2024/12/25 13:54:48

效果

在这里插入图片描述

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 */

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/820860.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在排序数组中查找元素的第一个和最后一个位置——力扣34

文章目录 题目描述法一 二分查找 题目描述 法一 二分查找 int bsearch_1(int l, int r) {while (l < r){int mid (l r)/2;if (check(mid)) r mid;else l mid 1;}return l; }int bsearch_2(int l, int r) {while (l < r){int mid ( l r 1 ) /2;if (check(mid)) l …

第一个maven项目(IDEA生成)

第一个maven项目&#xff08;IDEA生成&#xff09; 步骤1 配置Project SDK 步骤2 配置maven File->Settings搜索maven

【Docker】Docker比虚拟机快的原因、ubuntu容器、镜像的分层概念和私有库的详细讲解

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前学习C/C、算法、Python、Java等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;CSTL&…

proteus常用元件图示和名称(持续更新...)

初学单片机,记录一下proteus常用的元件目录 proteus常用元件图示和名称1 SWITCH(一位开关)2 CAP(无极性电容)3 CAP-ELEC(极性电容)4 CRYSTAL(晶振)5 LED-BIBY(发光二极管)6 RES(电阻)7 BUTTON(按钮)8 AT89C51(经典单片机)9 BUS(总线)10 VCC(电源)11 GROUND(接地)12 BUZZER(蜂鸣…

C++实现矩阵乘法

本贴分享用C实现矩阵乘法计算的功能&#xff0c;具体内容请看代码和注释&#xff0c;这里单独说一明一部分代码块。 1.采用vector< vector<int>>的方式&#xff0c;可以实现无限度的二维动态数组&#xff0c;需要注意的是&#xff0c;对于C来说a[m][n]的写法是合法…

备战秋招 | 笔试强训20

目录 一、选择题 二、编程题 三、选择题题解 四、编程题题解 一、选择题 1、对于顺序存储的线性表&#xff0c;访问结点和增加结点的时间复杂度为&#xff08;&#xff09;。 A. O(n) O(n) B. O(n) O(1) C. O(1) O(n) D. O(1) O(1) 2、在下列链表中不能从当前结点出发访问…

NineData支持全版本的企业级Oracle客户端

Oracle 数据库是一款全球领先的关系型数据库管理系统&#xff0c;它为企业提供了高性能、高可用性和安全性的数据处理解决方案&#xff0c;被广泛应用于各个行业。对于 Oracle 数据库&#xff0c;大家都很熟悉&#xff0c;本文不再赘述。 近期&#xff0c;NineData 发布对 Ora…

云时代的运维正是不折不扣的架构师

1、引言 上学那会&#xff0c;每当作文中引用到张良这个典故&#xff0c;总喜欢用 “运筹帷幄之中&#xff0c;决胜千里之外” 来赞美张良雄才大略&#xff0c;指挥若定&#xff0c;现在还让我用的话&#xff0c;我会把这句话送给运维同学。 2013年左右&#xff0c;一朋友在某…

SOP/详解*和**/python数据结构(iter,list,tuple,dict)/ 解包

一、错误解决合集 1. > combined_seq.named_children() 2. isinstance 2th parameter : must be a type or tuple of types > 改为tuple&#xff0c;不要用列表。改为 LLLayer (nn.Conv2d,nn.Linear) 3. File “test.py”, line 90, in calculate_fin_fout print(“hi”…

Python生成自定义URL二维码并保存为图片文件

脚本简介描述&#xff1a; 我们的应用场景是网站提供了Android客户端的二维码&#xff0c;可以进行扫码直接下载。所以使用下方的脚本可以自动生成URL路径二维码&#xff0c;并保存到指定路径下展示在网站上。 代码展示 PS&#xff1a;主要用到了 qrcode第三方模块 [rootnod…

Flask-SocketIO

一、简介&#xff1a; Flask-SocketIO使Flask应用程序可以实现客户端和服务器之间的低延迟双向通信。客户端应用程序可以使用 Javascript、Python、C、Java和Swift中的任何SocketIO客户端库或任何其他兼容客户端来建立与服务器的永久连接。 二、安装&#xff1a; pip instal…

java高并发系列 - 第22天:JUC底层工具类Unsafe

java高并发系列 - 第22天:JUC底层工具类Unsafe 这是java高并发系列第22篇文章,文章基于jdk1.8环境。 本文主要内容 Unsafe基本介绍获取Unsafe实例Unsafe中的CAS操作Unsafe中原子操作相关方法介绍Unsafe中线程调度相关方法介绍park和unpark示例Unsafe锁示例Unsafe中对volati…

window安装mysql

1、下载mysql 官网下载地址&#xff1a;MySQL :: Download MySQL Community Server 国内阿里云镜像下载地址&#xff1a;mysql镜像_mysql下载地址_mysql安装教程-阿里巴巴开源镜像站 2、安装 我下载的是mysql-5.7.36-winx64.msi安装版本 选择安装类型&#xff1a; 选择安装位…

【测试设计】性能测试工具选择:wrk?jmeter?locust?还是LR?

目录 前言 wrk 优点 缺点 jmeter 优点 缺点 locust 优点 缺点 总结 资料获取方法 前言 当你想做性能测试的时候&#xff0c;你会选择什么样的测试工具呢&#xff1f;是会选择wrk&#xff1f;jmeter&#xff1f;locust&#xff1f;还是loadrunner呢&#xff1f; 今…

台式机/工控机通过网线共享笔记本电脑无线网络(待续)

1、 将台式机通过网线和笔记本连接。 2、 将笔记本的“本地连接”和“无线网络连接”的ipv4均设置为自动获取。 4.修改台式机的IP地址为如下&#xff08;对应笔记本信息&#xff09; IP地址为192.168.XXX.12 子网掩码为255.255.255.0 默认网关为192.168.XXX.1 首选DNS为192.16…

蓝桥云课ROS机器人旧版实验报告-06工业机械臂-使用Moveit!

项目名称 实验六 使用MoveIt&#xff01; 成绩 内容&#xff1a;机械臂、体系结构、简单运动规划、抓取放置任务 实验记录&#xff08;70分&#xff09; 按实验一完成升级配置。 如果需要查阅moveit详细资料&#xff0c;参考如下官网截图&#xff1a; 本实验需要安装…

python面试题【题目+答案】

最近遇到了一份python的面试题&#xff0c;题目比较简单&#xff0c;时间控制在一个小时之内。以下是面试的题目跟答案&#xff0c;答案不代表最优解&#xff0c;只是当时所想到的一些思路&#xff0c;接下来将分享给大家。 1. 给出下面打印结果 答案&#xff1a; 12.0 6.0…

二叉树OJ(C)

文章目录 1.单值二叉树1.1法一&#xff1a;无返回值1.2法二&#xff1a;有返回值 2.相同的树3.对称二叉树4.二叉树的前序遍历5.二叉树的中序遍历6.二叉树的后序遍历7.另一棵树的子树8.二叉树遍历 1.单值二叉树 1.1法一&#xff1a;无返回值 struct TreeNode {int val;struct …

从国内最早的开放银行说起...

在银行技术部门工作的这几年&#xff0c;频繁听到「开放银行」这个概念。 "开放银行"一词是指通过应用编程接口&#xff08;API&#xff09;在各方之间共享财务数据的业务模式&#xff0c;包括金融服务提供商&#xff08;银行、保险公司、零售商等&#xff09;之间、…

Excel·VBA定量装箱、凑数值金额、组合求和问题

如图&#xff1a;对图中A-C列数据&#xff0c;根据C列数量按照一定的取值范围&#xff0c;组成一个分组装箱&#xff0c;要求如下&#xff1a; 1&#xff0c;每箱数量最好凑足50&#xff0c;否则为47-56之间&#xff1b; 2&#xff0c;图中每行数据不得拆分&#xff1b; 3&…