css3oading动画 |css登陆界面 聚焦

.loading {
/* 定义旋转动画 */
-webkit-animation: rotate 0.8s infinite;
animation: rotate 0.8s infinite;
/* 定义动画的速度变化 */
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
/* 指定动画执行时间 */
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
}
/* 定义旋转动画 */
@-webkit-keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

上述代码定义了一个名为loading的类，其中包含了一个循环旋转的动画效果。通过使用@keyframes指令，大家定义动画的两个状态：0%表示动画开始时元素的状态，此处为不旋转，transform属性的值为rotate(0deg)；100%表示动画结束时元素的状态，此时元素会做360度旋转，transform属性的值为rotate(360deg)。

为了让动画循环执行，大家将animation属性的值设为infinite。animation-timing-function属性可以控制动画的速度变化，这里大家使用linear表示动画执行速度线性不变。

最后，将动画执行时间设置为0.8s即可。调用该类名，即可在页面中呈现出一个循环旋转的Loading效果。