纯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一边大 */
width: 100%;
height: 100%;
}
/* div最外层容器标签 */
.box{
/* */
width: 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;
width: 120px;
height: 120px;
/* border: 1px solid black; */
list-style: none;
}
ul li{
position: absolute;
/* 和他的老父亲一边宽 */
width: 100%;
height: 100%;
/* 旋转 */
transform:rotate(calc(18deg * var(--i)));
}
/* 给每一个li元素添加内部子元素:伪元素 */
ul li::after{
position: absolute;
/* 伪元素无比要有content */
content: '';
width: 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">
<!-- 无需列表展示loading图形 -->
<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>
