css3写一个加载中旋转

对于一个网站或者应用程序来说，加载速度是非常重要的，因为它直接影响用户体验。但是有时候，即使我们已经尽可能优化了加载速度，仍然不能避免需要加载的内容有些过于庞大，而这时不可避免的需要加上一个加载中提示，告诉用户数据正在加载中。为了让这个加载中的提示更加生动，我们可以用CSS3代码实现一个旋转的加载中动画。

.spinner{
    /*设置容器宽高*/width: 40px;
    height: 40px;
    /*设置圆圈大小及样式*/border: 6px solid rgba(0, 0, 0, 0.15);
    border-left-color: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    /*动画关键帧*/animation: rotate 1s linear infinite;
}
/*动画效果*/@keyframes rotate {
from {
    transform:rotate(0deg);
}
to {
    transform:rotate(360deg);
}
}
    

以上是实现这个加载中旋转动画的核心代码，我们首先需要一个容器，然后设置它的大小，并且让它看起来像一个圆圈。然后我们通过CSS3的动画效果，实现旋转一圈的动画。这里需要注意的是，我们在关键帧中，需要设置从0度旋转到360度旋转，这样才能形成一个完整的旋转动画。

当然，还需要根据自己的需求来调整样式。比如，你可以设置不同的颜色，调整大小、速度等等。你也可以灵活运用这个动画，来设计其他更复杂、更有趣的动画效果。

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