纯 CSS3 实现 loading… 动画加载效果，需要一张透明的 png 图片，代码如下：
HTML：
<img id="loading-img" src="img/icon-loading.png">
CSS：
<style>
/*动画效果*/
#loading-img {
display: block;
margin: 20px auto;
width: 30%;
/*animation (动画) :绑定选择器, 4s完成动画 linear(匀速) infinite(循环) */
animation: loading 3s linear infinite;
}
[email protected],能够创建动画 , que 定义动画的名称 可自己定义*/
@keyframes loading {
/*以百分比来规定改变发生的时间 也可以通过"from"和"to",等价于0% 和 100%*/
0% {
/*rotate(2D旋转) scale(放大或者缩小) translate(移动) skew(翻转)*/
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
未经允许不得转载：w3h5 » 纯CSS3实现图片无限旋转加载动画特效
原创文章，作者：kepupublish，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/150347.html