css3 等待加载效果

CSS3等待加载效果

CSS3中有许多有趣的效果可以应用在等待加载的时候，为网站增添些许亮点。

以下是一些常用的效果：

.spinner {
    width: 40px;
    height: 40px;
    margin: 100px auto;
    background-color: #333;
    border-radius: 100%;
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% {
 -webkit-transform: scale(0) }
100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
     transform: scale(0);
    -webkit-transform: scale(0);
}
 100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    opacity: 0;
}
}
    

代码解析：

这是一个简单的加载等待效果，使用了CSS3的动画特效。我们定义了一个大小为40*40的圆形，并进行一些样式处理。然后使用@keyframes定义了一个渐变消失的动画效果，即在0%到100%的过程中，逐渐变大，并且透明度逐渐降低，所以看起来就像是一个等待加载的动画。我们将这个动画设置为无限循环，直到等待加载的过程结束。

使用这样的效果可以提高用户体验，并且为网站增添一些活力。CSS3中有许多其他的动画效果，可以进行自由组合，创造出自己想要的等待加载效果。

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