纯 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);
}
}