纯css实现loading动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>loading</title>

<style>
/* 清楚默认样式*/
*{
margin:0;
padding: 0;
}
html,body{
/* 让网页主题和浏览器的w||H一边大 */
100%;
height: 100%;
}
/* div最外层容器标签 */
.box{
/* */
100%;
height: 100%;
/* 渐变颜色*/
/*background-image: linear-gradient(to right,red,orange,yellow,blue,cyan,blue,purple);*/
/* div采用flex布局 */
display: flex;
/* 水平剧中*/
justify-content: center;
/* 垂直居中 */
align-items: center;
/*animation: change 2s linear 0s infinite;*/
}
/* 无须列表 */
ul{
position: relative;
120px;
height: 120px;
/* border: 1px solid black; */
list-style: none;
}
ul li{
position: absolute;
/* 和他的老父亲一边宽 */
100%;
height: 100%;
/* 旋转 */
transform:rotate(calc(18deg * var(--i)));
}
/* 给每一个li元素添加内部子元素:伪元素 */
ul li::after{
position: absolute;
/* 伪元素无比要有content */
content: '';
15px;
height: 15px;
background:cyan;
left:0px;
top:0px;
border-radius: 50%;
/* 调用动画动画名字动画总时间动画速率第一次动画延迟时间动画执行次数*/
animation: donghua 2s linear infinite;
/* 延迟时间*/
animation-delay: calc(0.1s * var(--i))
}
/* 声明动画 */
@keyframes donghua{
from{
transform: scale(1);
}
to{
transform: scale(0);
}
}

/* 镜像:颜色进行动画 */
@keyframes change {
from{
filter: hue-rotate(0deg)
}
to{
filter: hue-rotate(360deg)
}
}

</style>
</head>
<body>

<div class="box">

<ul>
<li style="--i:1;"></li>
<li style="--i:2;"></li>
<li style="--i:3;"></li>
<li style="--i:4;"></li>
<li style="--i:5;"></li>
<li style="--i:6;"></li>
<li style="--i:7;"></li>
<li style="--i:8;"></li>
<li style="--i:9;"></li>
<li style="--i:10;"></li>
<li style="--i:11;"></li>
<li style="--i:12;"></li>
<li style="--i:13;"></li>
<li style="--i:14;"></li>
<li style="--i:15;"></li>
<li style="--i:16;"></li>
<li style="--i:17;"></li>
<li style="--i:18;"></li>
<li style="--i:19;"></li>
<li style="--i:20;"></li>
</ul>
</div>
</body>
</html>