box-shadow + animation 实现loading

最新推荐文章于 2021-06-03 03:03:04 发布

weixin_30642305

最新推荐文章于 2021-06-03 03:03:04 发布

阅读量162

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chuangweili/p/5159599.html

本文介绍了一种使用CSS实现的无限循环旋转加载动画效果。通过定义关键帧动画和旋转类名，可以轻松创建平滑的旋转动画。适用于网页加载提示等场景。

.loading{ width:3px; height:3px; border-radius:100%; margin-left:20px;
box-shadow:0 -10px 0 1px #333,10px 0px #333,0 10px #333,-10px 0 #333,-7px -7px 0 .5px #333,7px -7px 0 1.5px #333,7px 7px #333,-7px 7px #333;}
.spin{
-webkit-transform: rotate(360deg);
-webkit-animation:spin 1s linear infinite;
}
@-webkit-keyframes spin{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
.spin{
transform: rotate(360deg);
animation:spin 1s linear infinite;
}
@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

无限循环的CSS都是使用 spin 作为类名以及动画关键字，约定俗成的使用

转载于:https://www.cnblogs.com/chuangweili/p/5159599.html