css3oading动画

CSS3动画是Web设计中常见的一种交互方式，可用于呈现页面加载、交互效果等。其中Loading动画在页面加载过程中可以为用户提供更好的视觉体验，使用户不至于感到无趣。

.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效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！