windows加载动画

更新时间:2023-04-04 13:00:37 阅读：评论：0

先看效果：

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%2020中秋晚会节目单时就转到540deg，在80%时就飚到了720deg，时间紧任务重那这段时间肯定就加快转了呀~
当然其实曲线也可以用贝塞尔曲线(cubic-bezier)完成；
贝塞尔曲线(cubic-bezier)

完整代码：

  <!DOCTYPE html><html lang="zh-CN"><head>    <meta chart="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>