【SCSS】网格布局中的动画

效果

在这里插入图片描述

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.mzph.cn/news/21681.shtml

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

相关文章

C 语言高级2-多维数组,结构体,递归操作

1. 多维数组 1.1 一维数组 元素类型角度&#xff1a;数组是相同类型的变量的有序集合内存角度&#xff1a;连续的一大片内存空间 在讨论多维数组之前&#xff0c;我们还需要学习很多关于一维数组的知识。首先让我们学习一个概念。 1.1.1 数组名 考虑下面这些声明&#xff1…

react中使用redux-persist做持久化储存

某天下午折腾着玩的 – 笔记 安装相关依赖 npm install reduxjs/toolkit redux-persist redux react-redux// store.jsx import { configureStore, getDefaultMiddleware } from "reduxjs/toolkit"; import { persistStore, persistReducer } from "redux-per…

无涯教程-Lua - 调试语句

Lua提供了一个调试库&#xff0c;该库提供了所有原始函数供无涯教程创建自己的调试器。即使没有内置的Lua调试器&#xff0c;也有许多针对Lua的调试器&#xff0c;这些调试器由各种开发人员创建&#xff0c;其中许多开源。 下表列出了Lua调试库中可用的函数及其用法。 Sr.No.…

Apache RocketMQ 命令注入

漏洞简介 RocketMQ 5.1.0及以下版本&#xff0c;在一定条件下&#xff0c;存在远程命令执行风险。RocketMQ的NameServer、Broker、Controller等多个组件外网泄露&#xff0c;缺乏权限验证&#xff0c;攻击者可以利用该漏洞利用更新配置功能以RocketMQ运行的系统用户身份执行命令…

论文阅读- Uncovering Coordinated Networks on Social Media:Methods and Case Studies

链接&#xff1a;https://arxiv.org/pdf/2001.05658.pdf 目录 摘要&#xff1a; 引言 Methods Case Study 1: Account Handle Sharing Coordination Detection 分析 Case Study 2: Image Coordination Coordination Detection Analysis Case Study 3: Hashtag Sequen…

k8s手动发布镜像的方法

kubectl edit deploy编辑对应的文件&#xff0c;并:wq!保存即可

2023年第四届“华数杯”数学建模思路 - 案例:FPTree-频繁模式树算法

## 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法&#xff0c;就是频繁模式树算法&#xff0c;他与Apriori算法一样也是用来挖掘频繁项集的&#xff0c…

互联网摸鱼日报(2023-08-03)

互联网摸鱼日报(2023-08-03) 36氪新闻 飞行汽车风口来了&#xff0c;什么时候我能坐上&#xff1f; 小红书的本地生活&#xff0c;还在玩票期 并行科技8月8日北交所上会&#xff0c;主营业务为超算云服务和算力运营服务 群玉山咨询马晓波&#xff1a;新消费品牌如何通过赛道…

21.Netty源码之编码器

highlight: arduino-light Netty如何实现自定义通信协议 在学习完如何设计协议之后&#xff0c;我们又该如何在 Netty 中实现自定义的通信协议呢&#xff1f;其实 Netty 作为一个非常优秀的网络通信框架&#xff0c;已经为我们提供了非常丰富的编解码抽象基类&#xff0c;帮助我…

sklearn 转换器和预估器

刚学习sklearn时&#xff0c;没分清转换器的fit&#xff08;&#xff09;和模型训练的fit&#xff08;&#xff09;&#xff0c;还以为是一个&#xff0c;结果学完了回过头来&#xff0c;才发现这些差异。再此记录一下。 一、 sklearn 转换器和预估器 转换器&#xff08;Trans…

Java--学生管理系统

本案例基于Java语言中的ArrayList集合来储存数据&#xff0c;并建立两个类——学生类和用户类存储在集合中&#xff0c;通过用户交互&#xff0c;搭建简单的学生管理系统。 1、学生类 学生类利用set函数进行获取学生单个信息&#xff0c;show函数负责获取全部信息。 package …

LCD驱动芯片VK1024B兼容HT系列驱动芯片,体积更小

产品型号&#xff1a;VK1024B 产品&#xff1a;VINKA/永嘉微电 封装形式&#xff1a;SOP16 产品年份&#xff1a;新年份 工程服务&#xff0c;技术支持&#xff0c;用芯服务 VK1024概述&#xff1a; VK1024B 是 24 点、 内存映象和多功能的 LCD 驱动&#xff0c; VK1024B …

Nginx实现反向代理和负载均衡

Nginx安装 本文章主要介绍下&#xff0c;如何使用Nginx来实现反向代理和负载均衡&#xff0c;Nginx安装和基础知识&#xff0c;可参考我的这篇文章 Nginx安装。 Nginx实现反向代理 实现反向代理需要准备两台Nginx服务器。一台Nginx服务器A&#xff0c;ip为 192.168.206.140&…

MySQL主从复制入门指南:基础概念和配置步骤

文章目录 前言一、问题分析二、Mysql主从复制1. 介绍2. 配置3. 测试 三、读写分离案例1. 背景2. shardingDBC介绍3. 入门案例4. 功能测试 总结 前言 为了巩固所学的知识&#xff0c;作者尝试着开始发布一些学习笔记类的博客&#xff0c;方便日后回顾。当然&#xff0c;如果能帮…

基于freertos的温湿度蓝牙系统

前言&#xff1a;本项目主要是基于freertos的小项目&#xff0c;目的是为了巩固近期学习的知识&#xff0c;功能较简单&#xff0c;可自行扩充。 一、项目基本架构 项目基本功能&#xff1a;通过STM32单片机的freertos操作系统&#xff0c;将温湿度数据显示在oled屏幕上&#…

节流函数(执行最后一次)

节流函数的主要目的是限制一个函数在一定时间内只能执行一次。以下是一个使用JavaScript编写的基本节流函数&#xff1a; function throttle(func, delay) {let lastCall 0;return function() {const now new Date().getTime();if (now - lastCall < delay) {return;}las…

vue响应数据为二维码如何渲染到页面

在postman测试请求后发现响应数据为一个二维码图片,不是链接,如何解决? 然后如果在vue中使用请求还会报Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1的错误。这个就是使用了JSON.parse导致的响应格式不对)&#xff0c;使用JSON.stringify解决…

Spring Boot集成单元测试调用dao,service

文章目录 Spring Boot集成单元测试调用dao&#xff0c;service1 添加相关依赖2 新建测试类 Spring Boot集成单元测试调用dao&#xff0c;service 1 添加相关依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-st…

入门NLTK:Python自然语言处理库初级教程

NLTK&#xff08;Natural Language Toolkit&#xff09;是一个Python库&#xff0c;用于实现自然语言处理&#xff08;NLP&#xff09;的许多任务。NLTK包括一些有用的工具和资源&#xff0c;如文本语料库、词性标注器、语法分析器等。在这篇初级教程中&#xff0c;我们将了解N…

奥威BI—数字化转型首选,以数据驱动企业发展

奥威BI系统BI方案可以迅速构建企业级大数据分析平台&#xff0c;可以将大量数据转化为直观、易于理解的图表和图形&#xff0c;推动和促进数字化转型的进程&#xff0c;帮助企业更好地了解自身的运营状况&#xff0c;及时发现问题并采取相应的措施&#xff0c;提高运营效率和质…