纯 CSS3 实现 loading... 动画加载效果,需要一张透明的 png 图片,代码如下:
HTML:
CSS:
/*动画效果*/
#loading-img{
display:block;
margin:20pxauto;
width:30%;
/*animation(动画):绑定选择器,4s完成动画linear(匀速)infinite(循环)*/
animation:loading3slinearinfinite;
}
[emailprotected],能够创建动画,que定义动画的名称可自己定义*/
@keyframesloading{
/*以百分比来规定改变发生的时间也可以通过"from"和"to",等价于0%和100%*/
0%{
/*rotate(2D旋转)scale(放大或者缩小)translate(移动)skew(翻转)*/
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
如果觉得《html如何设置图片循环旋转动画效果 纯CSS3实现图片无限旋转加载动画特效》对你有帮助,请点赞、收藏,并留下你的观点哦!