.loading {
width:30px;
height:30px;
display:inline-block;
border:3px solid #ccc;
border-radius:50%;
/* 将正方形的div变成圆环 */
border-top:3px solid #1F9FFF;
/* 将上边框改成蓝色 */
}
/* 定义动画 */
@keyframes loadingAnimation {
/* 动画开始 */
0% {
transform:rotate(0deg);
}
/* 动画结束 */
100% {
transform:rotate(360deg);
}
}/* 添加动画 */
.loading {
animation:loadingAnimation 1s infinite linear;
}
更新时间:2021-01-07 01:30:11
借助于border-radius制作圆环,用animation让圆环动起来