html如何设置图片循环旋转动画效果,纯CSS3实现图片无限旋转加载动画特效

纯 CSS3 实现 loading... 动画加载效果，需要一张透明的 png 图片，代码如下：

HTML：

CSS：

/*动画效果*/

#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);

}

}