windows加载动画
先看效果：
Windows加载动画应该是这样吧，不是也没事，懂原理之后这个运动曲线可以任意自己设置的~
实现：
1.定义标签：
<div class="yongqi">
<div class="quan">
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
</div>
<p>Windows 正在加载</p>
</div>
2.整体样式，首先是5个盒子（.dian）先是定位后是重叠在一起的，然后定义一个animation动画，目的是盒子旋转：：
.quan{
position: relative;
margin: 0 auto;
margin-bottom: 20px;
width: 60px;
height: 60px;
}
.dian{
position: absolute;
width: 100%;
height: 100%;
animation: zhuan 3.5s linear infinite;
}
3.用伪类元素做小圆点，那么它的父亲盒子（.dian）转的时候就会带动小圆点转：
.dian::after{
content: '';
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background-color: #fff;
border-radius: 50%;
}
4.让每个（.dian）盒子等待一点时间后再转，那么小圆点就不会重叠在一起转了：
.quan:nth-child(1){
animation-delay: 0s;
}
.quan div:nth-child(2){
animation-delay: 0.1s;
}
.quan div:nth-child(3){
animation-delay: 0.2s;
}
.quan div:nth-child(4){
animation-delay: 0.3s;
}
.quan div:nth-child(5){
animation-delay: 0.4s;
}
animation-delay 属性：属性定义动画何时开始。
5.实现部分，定义运动曲线：
@keyframes zhuan{
0%{
transform: rotate(0deg);
opacity: 1;
}
70%{
transform: rotate(540deg);
}
79%{
opacity: 1;
}
80%{
transform: rotate(720deg);
opacity: 0;
}
100%{
transform: rotate(810deg);
opacity: 0;
}
}
原理：从上面效果图可以看出，整个动画只转了2圈后小圆点便消失后动画重复，就是转720deg。用opacity: 0 属性后圆点就会消失。那么我为什么动画不在100%的时候设置rotate（720deg）呢， 因为如果我这样：
0%{
transform: rotate(0deg);
opacity: 1;
}
100%{
transform: rotate(720deg);
opacity: 0;
}
根据动画的效果，小圆点会在转动到720deg之前就开始慢慢消失了。不能做到突然消失。所以可以在之前加：
99%{
opacity: 1;
}
这样圆点可以突然消失，但是圆点一消失后动画又马上重新开始了，无停顿。
所以我让动画在进度为80%这样就小圆点转到720deg后便消失了，（其实也没消失是透明了），已经透明看不见的圆点继续转到810deg，这样有个时间缓冲后动画才又重新开始。
至于最后半圈旋转速度明显加快了是因为：
70%{
transform: rotate(540deg);
}
80%{
transform: rotate(720deg);
opacity: 0;
}
动画进度在70%时就转到540deg，在80%时就飚到了720deg，时间紧任务重那这段时间肯定就加快转了呀~
当然其实曲线也可以用贝塞尔曲线(cubic-bezier)完成；
贝塞尔曲线(cubic-bezier)
完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>北极光之夜</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(15, 125, 199);
color: rgb(255, 255, 255);
}
.quan{
position: relative;
margin: 0 auto;
margin-bottom: 20px;
width: 60px;
height: 60px;
}
.dian{
position: absolute;
width: 100%;
height: 100%;
animation: zhuan 3.5s linear infinite;
}
.dian::after{
content: '';
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background-color: #fff;
border-radius: 50%;
}
.quan:nth-child(1){
animation-delay: 0s;
}
.quan div:nth-child(2){
animation-delay: 0.1s;
}
.quan div:nth-child(3){
animation-delay: 0.2s;
}
.quan div:nth-child(4){
animation-delay: 0.3s;
}
.quan div:nth-child(5){
animation-delay: 0.4s;
}
@keyframes zhuan{
0%{
transform: rotate(0deg);
opacity: 1;
}
70%{
transform: rotate(540deg);
}
79%{
opacity: 1;
}
80%{
transform: rotate(720deg);
opacity: 0;
}
100%{
transform: rotate(810deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="yongqi">
<div class="quan">
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
</div>
<p>Windows 正在加载</p>
<P style="margin-top: 10px; text-align: center;">--北极光之夜--</P>
</div>
</body>
</html>
总结：
那天暴风雪与春日的阳光交替而至，令人应接不暇。天空被蓝天和乌云一分为二。和我一样。--------------《小森林》
本文地址：https://blog.csdn.net/luo1831251387/article/details/111938262
上一篇： CSS Center（居中专题）
下一篇： BurpWeb安全学院之不安全的反序列化