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>

总结：

那天暴风雪与春日的阳光交替而至，令人应接不暇。天空被蓝天和乌云一分为二。和我一样。--------------《小森林》