css小练习：案例6.炫彩加载
一.效果浏览图
二.实现思路
html部分
HTML 写了一个加载动画效果，使用了一个包含多个
<span>元素的<div>元素，并为每个<span>元素设置了一个自定义属性--i。这段代码创建了一个简单的动态加载动画，由20个垂直排列的线段组成。每个线段使用一个
<span>元素表示，并通过设置不同的--i值来控制它们的样式或动画效果（在给定代码中，--i的值仅表示索引，范围从1到20）。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/oo1.css">
</head>
<body><section><div class="loader"><span style="--i:1;"></span><span style="--i:2;"></span><span style="--i:3;"></span><span style="--i:4;"></span><span style="--i:5;"></span><span style="--i:6;"></span><span style="--i:7;"></span><span style="--i:8;"></span><span style="--i:9;"></span><span style="--i:10;"></span><span style="--i:11;"></span><span style="--i:12;"></span><span style="--i:13;"></span><span style="--i:14;"></span><span style="--i:15;"></span><span style="--i:16;"></span><span style="--i:17;"></span><span style="--i:18;"></span><span style="--i:19;"></span><span style="--i:20;"></span></div></section>
</body>
</html>css部分
* {margin: 0;padding: 0;box-sizing: border-box;
}
这段代码应用了一个通用的CSS选择器 * ，将所有元素的外边距和内边距重置为0，并使用 border-box 盒模型，以确保元素的宽度和高度包括边框和内边距。
section {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #042104;animation: animateBg 10s linear infinite;
}
这一部分定义了 <section> 元素的样式。将其设置为弹性布局，并使用 justify-content 和 align-items 属性使其内容水平和垂直居中。min-height 设置为 100vh，确保 <section> 元素至少铺满整个视口的高度。background 属性设置了一个深绿色的背景，并应用了一个名为 animateBg 的动画，周期为10秒，线性变化以实现颜色的循环过渡。
section .loader {position: relative;width: 120px;height: 120px;
}
这部分针对加载动画的容器 <div class="loader"> 应用了样式规则。将其设置为相对定位，宽度和高度均为120px。
section .loader span {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform: rotate(calc(18deg * var(--i)));
}
这部分定义了每个线段 <span> 元素的样式。将其设置为绝对定位，相对于容器的左上角进行定位。宽度和高度设置为100%，使其充满容器。transform 属性使用 rotate() 函数根据每个线段的索引（通过 var(--i) 参数获取）计算旋转角度，并使线段围绕容器的中心旋转。
section .loader span::before {content: '';position: absolute;top: 0;left: 0;width: 15px;height: 15px;border-radius: 50%;background: #00ff0a;box-shadow: 0 0 10px #00ff0a,0 0 20px #00ff0a,0 0 40px #00ff0a,0 0 60px #00ff0a,0 0 80px #00ff0a,0 0 100px #00ff0a;animation: animate 2s linear infinite;animation-delay: calc(0.1s * var(--i));
}
这一部分定义了每个线段的样式。使用 ::before 伪元素来创建一个圆形的指示器。设置其宽度和高度为15px，边框半径为50%，背景颜色为亮绿色 #00ff0a。box-shadow 属性为指示器添加一系列的内阴影，在不同的距离和模糊程度下产生细微的发光效果。 animation 属性应用了一个名为 animate 的动画效果，周期为2秒，线性变化，并设置为无限循环播放。animation-delay 通过计算每个线段的索引值（通过 var(--i) 参数获取）乘以0.1s来设置动画的延迟时间，以实现线段的逐个出现效果。
@keyframes animate {0% {transform: scale(1);}80%,100% {transform: scale(0);}
}
最后，这部分定义了名为 animate 的动画的关键帧，控制指示器的缩放效果。在动画的初始帧（0%），通过 transform: scale(1) 将指示器设置为原始尺寸。在80%和100%的帧中，通过 transform: scale(0) 将指示器缩放为0，实现渐渐消失的效果。
三.完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/oo1.css"><style>*{margin: 0;padding: 0;box-sizing: border-box;
}
section{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #042104;animation: animateBg 10s linear infinite;
}
@keyframes animateBg {0%{filter: hue-rotate(0deg);}100%{filter: hue-rotate(360deg);}
}
section .loader{position: relative;width: 120px;height: 120px;}
section .loader span {position: absolute;top: 0;left: 0;width: 100%;height:100%;transform: rotate(calc(18deg * var(--i)));
}
section .loader span::before{content:'';position: absolute;top: 0;left: 0;width: 15px;height: 15px;border-radius: 50%;background:#00ff0a;box-shadow: 0 0 10px #00ff0a,0 0 20px #00ff0a,0 0 40px #00ff0a,0 0 60px #00ff0a,0 0 80px #00ff0a,0 0 100px #00ff0a;animation: animate 2s linear infinite;animation-delay: calc(0.1s * var(--i));}
@keyframes animate {0%{transform: scale(1);}80%,100%{transform: scale(0);}}</style>
</head>
<body><section><div class="loader"><span style="--i:1;"></span><span style="--i:2;"></span><span style="--i:3;"></span><span style="--i:4;"></span><span style="--i:5;"></span><span style="--i:6;"></span><span style="--i:7;"></span><span style="--i:8;"></span><span style="--i:9;"></span><span style="--i:10;"></span><span style="--i:11;"></span><span style="--i:12;"></span><span style="--i:13;"></span><span style="--i:14;"></span><span style="--i:15;"></span><span style="--i:16;"></span><span style="--i:17;"></span><span style="--i:18;"></span><span style="--i:19;"></span><span style="--i:20;"></span></div></section>
</body>
</html>相关文章：
css小练习：案例6.炫彩加载
一.效果浏览图 二.实现思路 html部分 HTML 写了一个加载动画效果，使用了一个包含多个 <span> 元素的 <div> 元素，并为每个 <span> 元素设置了一个自定义属性 --i。 这段代码创建了一个简单的动态加载动画，由20个垂直排列的…...
使用正则表达式替换文本中的html标签
文章目录 使用正则表达式替换文本中的html标签原文本：使用正则表达式进行替换替换后：展示 html 文本 使用正则表达式替换文本中的html标签 我们存储 markdown 文章时，如果存储转换后的 html 页面，那么在查出来的时候，…...
当向数据库导入大量数据时,mysql主键唯一键重复插入,如何丝滑操作并不导入重复数据呢
解决办法： 答案来源：...
【go-zero】docker镜像直接部署go-zero的API与RPC服务 如何实现注册发现？docker network 实现 go-zero 注册发现
一、场景&问题 使用docker直接部署go-zero微服务会发现API无法找到RPC服务 1、API无法发现RPC服务 用docker直接部署 我们会发现API无法注册发现RPC服务 原因是我们缺少了docker的network网桥 2、系统内查看 RPC服务运行正常API服务启动，通过docker logs 查看日志还是未…...
微信小程序读取本地json
首先在项目录下新建【server】文件夹，新建data.js文件，并定义好json数据格式。如下： pages/index/index.ts导入data.js并请求json pages/index/index.wxml页面展示数据...
Stephen Wolfram：ChatGPT 的训练
The Training of ChatGPT ChatGPT 的训练 OK, so we’ve now given an outline of how ChatGPT works once it’s set up. But how did it get set up? How were all those 175 billion weights in its neural net determined? Basically they’re the result of very large…...
SpringCloud实用篇2——Nacos配置管理 Feign远程调用 Gateway服务网关
目录 1 Nacos配置管理1.1 统一配置管理1.1.1 在nacos中添加配置文件1.1.2 从微服务拉取配置 1.2 配置热更新1.2.1 方式一1.2.2 方式二（推荐） 1.3.配置共享 2 搭建Nacos集群2.1 集群结构图2.2 搭建集群2.2.1 初始化数据库2.2.2 下载nacos2.2.3 配置Nacos2…...
tomcat配置文件和web站点部署（zrlog）简介
一.tomcat/apache-tomcat-8.5.70/conf/server.xml组件类别介绍 1.类别 2.Connector参数 3.host参数 4.Context参数 二.web站点部署(以zrlog为例) 1.将zrlog的war包传到webapps下面 2.在mysql数据库中创建zrlog用户并赋予权限 3.完成安装向导，登录管理界面即可…...
elementui实现当前页全选+所有全选+翻页保持选中状
原文来自：https://blog.csdn.net/sumimg/article/details/121693305?spm1001.2101.3001.6650.1&utm_mediumdistribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-121693305-blog-127570059.235%5Ev38%5Epc_relevant_anti_t3&depth_1-utm…...
Opencv项目实战：24 石头剪刀布
目录 0、项目介绍 1、效果展示 2、项目搭建 3、项目代码展示与部分讲解 pyzjr库...
Qt--QPlugin插件
写在前面 Qt–动态链接库一文中提到，动态方式加载dll只能加载 extern "C“ 的导出函数，而无法加载类，因此可以使用Qt提供的插件来实现导出类的动态加载。 QPlugin是Qt插件框架的一部分，是一种轻量级的插件系统，…...
公会发展计划 (GAP) 第 4 季：塑造 YGG 的成就版图
基于前三个赛季所取得的成果，Yield Guild Games（YGG）自豪地宣布推出 公会发展计划（GAP）第 4 季。公会最近的一些精英成员将在本季加入公会，公会成员将在全新的任务中磨练自己的技能，建立自己在 …...
ExpressJS教程_编程入门自学教程_菜鸟教程-免费教程分享
教程简介 Express是基于Node.js平台,快速、开放、极简的Web开发框架；通俗的理解:Express的作用和Node.js内置的http模块类似,是专门用来创建Web服务器的；Express的本质:就是一个npm上的第三方包,提供了快速创建Web服务器的便捷方法。ExpressJS是一个Web…...
时序预测 | MATLAB实现BO-BiLSTM贝叶斯优化双向长短期记忆神经网络时间序列预测
时序预测 | MATLAB实现BO-BiLSTM贝叶斯优化双向长短期记忆神经网络时间序列预测 目录 时序预测 | MATLAB实现BO-BiLSTM贝叶斯优化双向长短期记忆神经网络时间序列预测效果一览基本介绍模型搭建程序设计参考资料 效果一览 基本介绍 MATLAB实现BO-BiLSTM贝叶斯优化双向长短期记忆…...
HIVE优化之不需要参数优化
#1.数据倾斜 什么是数据倾斜？ 一部分数据多 一部分数据少 造成的结果： MR运行过慢 主要是shuffle和reduce过程慢 分组聚合导致数据倾斜 Hive未优化的分组聚合 方法1：在MAP端直接聚合（分组聚合优化），减少…...
前端 select 标签如何创建下拉菜单？
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 代码示例⭐ 代码讲解⭐ 写在最后 ⭐ 专栏简介 前端入门之旅：探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚踏…...
基于 eclipse-temurin 构建国内时区，地区，语言的docker镜像
基于 eclipse-temurin 构建国内时区，地区，语言的镜像 使用场景自定Dockerfile构建自己的基础镜像构建本地镜像推送远程仓库 使用场景 在给应用构建自定义镜像时，往往需要在每次构建时去调整时区，地区这些东西；每次构建…...
RunnerGo配置场景时接口模式该怎么选
在进行性能测试时，测试场景的正确配置非常关键。首先，需要根据业务场景和需求，设计出合理的测试场景，再利用相应的工具进行配置，实现自动化的性能测试。 在JMeter中，用户需要自己组织测试场景，…...
系统分享UIActivity
iOS自带的分享控件可以完成绝大部分的分享需求。 它可以不需要集成微信、QQ等第三方SDK就可以实现分享（需要在弹出视图里面点击更多打开开关）到微信好友、朋友圈等,功能很强大，也很方便。 一、系统分享两个步骤 UIActivity配置分享的内容和…...
常用抓包工具
Fiddler Fiddler 是一个很好用的抓包工具，可以用于抓取http/https的数据包，常用于Windows系统的抓包，它有个优势就是免费 Charles Charles是由JAVA开发的，可以运行在window Linux MacOS，但它是收费的，和…...
自然语言处理学习笔记（五）————切分算法
目录 1.切分算法 2.完全切分 3.正向最长匹配 4.逆向最长匹配 5.双向最长匹配 6.速度评测 1.切分算法 词典确定后，句子可能含有很多词典中的词语，他们有可能互相重叠，如何切分需要一些规则。常用规则为：正向匹配算法、逆向匹…...
SQL-方法论
写SQL时可以考虑的手段： 行转列 先分为多个临时表，然后JOIN到一起 select uid,t1.name YuWen,t2.name ShuXue from (select uid,namefrom tableAwhere naem 语文) t1join (select uid,namefrom tableAwhere naem 数学) t2on t1.uid t2.uid; 用sum(if…...
[Python从零到壹] 六十八.图像识别及经典案例篇之图像特效（毛玻璃、浮雕、油漆和模糊特效变换）
八月太忙，还是写一篇吧！ 欢迎大家来到“Python从零到壹”，在这里我将分享约200篇Python系列文章，带大家一起去学习和玩耍，看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解，真心想把自己近十年的编程经验分享给大家，希望对您有所帮助，文章中不足…...
undefined与null的区别
null 表示一个对象被定义了，值为“空值” undefined 表示不存在这个值 1.undefined typeof undefined //"undefined" undefined 是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但还没有…...
Unity之获取用户地理位置
1.直接利用三方API获取： 1.1 利用bilibili的api 【未知稳定性】 public void Awake() {StartCoroutine(GetLocationInfoNew());}/// <summary>/// 利用bilibili的接口通过ip直接获取城市信息/// </summary>IEnumerator GetLocationInfoNew() {//UnityWebRequest …...
TC3XX - MCAL知识点（二十）：CAN MCAL配置及代码实战（CAN/CANFD/extenen CAN）
目录 1、概述 2、MCAL配置 2.1、实验目标 2.2、CAN配置（包含CAN与CANFD） 2.2.1、CanGeneral...
QT生成Debug和Release发布版后，运行exe缺少dll问题
在QT Creator生成debug和release的exe执行文件后，运行时，报错缺少*.dll.解决办法1： 在系统环境变量中添加D:\Qt\Qt5.13.2\Tools\mingw730_64\bin后，即可运行。 当使用此方法时，将exe拷贝到其他电脑中运行时，…...
企业进销存管理流程有哪些? 附进销存管理系统
阅读本文，您可以了解：1、进销存的定义；2、进销存的流程 首先，在了解进销存流程之前，我们必须厘清一个问题？ 什么是进销存？ 进销存是一个企业管理中常用的术语，是指企业在经营过程中…...
RPC原理与Go RPC详解
文章目录 RPC原理与Go RPC什么是RPC本地调用RPC调用HTTP调用RESTful API net/rpc基础RPC示例基于TCP协议的RPC使用JSON协议的RPCPython调用RPC RPC原理 RPC原理与Go RPC 什么是RPC RPC（Remote Procedure Call），即远程过程调用。它允许像调用…...
JavaScript:异步编程的发展
在JavaScript编程中，异步编程是处理耗时操作的关键技术，它允许程序在等待某些操作完成时继续执行其他任务，提高了程序的性能和响应性。随着技术的发展，JavaScript的异步编程模型也在不断演进，从最初的回调函数到现在的…...