什么？一看到css样式属性就脸盲？还不赶快行动！！！来和我一起撸起袖子实现一个简单的环形加载动画。
效果：
就当它在动吧！！🤡🤡🤡
实现：
<body>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
width: 100%;
/* 一个子元素的情况下设置垂直水平居中 */
display: flex;
justify-content: center;
align-items: center;
/* 渐变背景 */
background: linear-gradient(10deg,#7460cc,#22c962);
}
#box{
width: 200px;
height: 200px;
}
#box div{
/* 边框设置 */
border: 5px solid;
border-left-color: rgb(247, 247, 243);
border-right-color: rgb(247, 247, 243);
border-top-color: transparent;
border-bottom-color:transparent;
/* 圆角边框设置 */
border-radius: 50%;
/* 多个子元素的情况下设置垂直水平居中 */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/* 执行动画：动画名 时长 慢速开始然后变块然后慢速结束 无限次播放 */
animation: span 2s ease infinite;
}
#box div:nth-child(1){
width: 50px;
height: 50px;
}
#box div:nth-child(2){
width: 70px;
height: 70px;
/* 设置动画延迟时间 */
animation-delay: 0.1s;
}
#box div:nth-child(3){
width: 90px;
height: 90px;
animation-delay: 0.2s;
}
#box div:nth-child(4){
width: 110px;
height: 110px;
animation-delay: 0.3s;
}
/* 定义动画 */
@keyframes span {
50%{
transform: rotate(240deg);
}
100%{
transform: rotate(0);
}
}
</style>
</body>
