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

css小练习：案例6.炫彩加载

news 2025/11/9 7:56:05

一.效果浏览图

二.实现思路

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个垂直排列的…...

编程日记 2023/8/8 12:57:30

使用正则表达式替换文本中的html标签

文章目录使用正则表达式替换文本中的html标签原文本：使用正则表达式进行替换替换后：展示 html 文本使用正则表达式替换文本中的html标签我们存储 markdown 文章时，如果存储转换后的 html 页面，那么在查出来的时候，…...

编程日记 2023/8/8 12:56:29

当向数据库导入大量数据时,mysql主键唯一键重复插入,如何丝滑操作并不导入重复数据呢

解决办法： 答案来源：...

编程日记 2023/8/8 12:55:28

【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 查看日志还是未…...

编程日记 2023/8/8 12:54:27

微信小程序读取本地json

首先在项目录下新建【server】文件夹，新建data.js文件，并定义好json数据格式。如下： pages/index/index.ts导入data.js并请求json pages/index/index.wxml页面展示数据...

编程日记 2023/8/8 12:53:26

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…...

编程日记 2023/8/8 12:52:25

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…...

编程日记 2023/8/8 12:51:24

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.完成安装向导，登录管理界面即可…...

编程日记 2023/8/8 12:50:22

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…...

编程日记 2023/8/8 12:49:21

Opencv项目实战：24 石头剪刀布

目录 0、项目介绍 1、效果展示 2、项目搭建 3、项目代码展示与部分讲解 pyzjr库...

编程日记 2023/8/8 12:48:20

Qt--QPlugin插件

写在前面 Qt–动态链接库一文中提到，动态方式加载dll只能加载 extern "C“ 的导出函数，而无法加载类，因此可以使用Qt提供的插件来实现导出类的动态加载。 QPlugin是Qt插件框架的一部分，是一种轻量级的插件系统，…...

编程日记 2023/8/8 12:47:19

公会发展计划 (GAP) 第 4 季：塑造 YGG 的成就版图

基于前三个赛季所取得的成果，Yield Guild Games（YGG）自豪地宣布推出公会发展计划（GAP）第 4 季。公会最近的一些精英成员将在本季加入公会，公会成员将在全新的任务中磨练自己的技能，建立自己在 …...

编程日记 2023/8/8 12:46:17

ExpressJS教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 Express是基于Node.js平台,快速、开放、极简的Web开发框架；通俗的理解:Express的作用和Node.js内置的http模块类似,是专门用来创建Web服务器的；Express的本质:就是一个npm上的第三方包,提供了快速创建Web服务器的便捷方法。ExpressJS是一个Web…...

编程日记 2023/8/8 12:45:14

时序预测 | MATLAB实现BO-BiLSTM贝叶斯优化双向长短期记忆神经网络时间序列预测

时序预测 | MATLAB实现BO-BiLSTM贝叶斯优化双向长短期记忆神经网络时间序列预测目录时序预测 | MATLAB实现BO-BiLSTM贝叶斯优化双向长短期记忆神经网络时间序列预测效果一览基本介绍模型搭建程序设计参考资料效果一览基本介绍 MATLAB实现BO-BiLSTM贝叶斯优化双向长短期记忆…...

编程日记 2023/8/8 12:44:13

HIVE优化之不需要参数优化

#1.数据倾斜什么是数据倾斜？ 一部分数据多一部分数据少造成的结果： MR运行过慢主要是shuffle和reduce过程慢分组聚合导致数据倾斜 Hive未优化的分组聚合方法1：在MAP端直接聚合（分组聚合优化），减少…...

编程日记 2023/8/8 12:43:11

前端 select 标签如何创建下拉菜单？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 代码示例⭐ 代码讲解⭐ 写在最后 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界记得点击上方或者右侧链接订阅本专栏哦几何带你启航前端之旅欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚踏…...

编程日记 2023/8/8 12:42:10

基于 eclipse-temurin 构建国内时区，地区，语言的docker镜像

基于 eclipse-temurin 构建国内时区，地区，语言的镜像使用场景自定Dockerfile构建自己的基础镜像构建本地镜像推送远程仓库使用场景在给应用构建自定义镜像时，往往需要在每次构建时去调整时区，地区这些东西；每次构建…...

编程日记 2023/8/8 12:41:08

RunnerGo配置场景时接口模式该怎么选

在进行性能测试时，测试场景的正确配置非常关键。首先，需要根据业务场景和需求，设计出合理的测试场景，再利用相应的工具进行配置，实现自动化的性能测试。在JMeter中，用户需要自己组织测试场景，…...

编程日记 2023/8/8 12:40:06

系统分享UIActivity

iOS自带的分享控件可以完成绝大部分的分享需求。它可以不需要集成微信、QQ等第三方SDK就可以实现分享（需要在弹出视图里面点击更多打开开关）到微信好友、朋友圈等,功能很强大，也很方便。一、系统分享两个步骤 UIActivity配置分享的内容和…...

编程日记 2023/8/8 12:39:05

常用抓包工具

Fiddler Fiddler 是一个很好用的抓包工具，可以用于抓取http/https的数据包，常用于Windows系统的抓包，它有个优势就是免费 Charles Charles是由JAVA开发的，可以运行在window Linux MacOS，但它是收费的，和…...

编程日记 2023/8/8 12:38:03

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞！！！ 抽象现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...

编程新知 2025/11/7 9:56:12

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法配置通过调谐文件来调整相机行为使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包文章来源： http://raspberry.dns8844.cn/documentation 原文网址配置大多数用例自动工作，无需更改相机配置。但是，一…...

编程新知 2025/11/7 14:08:24

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述上一节对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2025/11/7 21:03:40

深入理解JavaScript设计模式之单例模式

目录什么是单例模式为什么需要单例模式常见应用场景包括单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量惰性单例通用的惰性单例结语什么是单例模式单例模式（Singleton Pattern&#…...

编程新知 2025/11/8 2:32:35

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...

编程新知 2025/11/1 23:43:26

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如中文，英文，日语），语音情感（如开心，悲伤）&#x…...

编程新知 2025/11/8 9:01:43

C++ Visual Studio 2017厂商给的源码没有.sln文件易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/11/7 19:35:08