css3 简单预加载动画

CSS3是一种常用的Web技术，它可以通过动画来增加页面的交互性和吸引力。预加载动画是CSS3中的一种特殊动画效果，它可以在页面加载时呈现出加载中的状态，让页面看起来更加流畅。

/* CSS代码 */.loading {
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loading::before {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid #3498db;
    border-top-color: transparent;
    animation: spin 1.5s linear infinite;
}
@keyframes spin {
to {
    transform: rotate(360deg);
}
}
    

以上是一个简单的预加载动画的CSS3代码。在HTML中，我们只需要添加一个div标签，并将其类名设为“loading”即可：

div class="loading">
    /div>
    

此时，在页面加载时，会显示一个类似于旋转的圆形，使用这种简单的预加载动画可以增加页面的交互性，同时提高用户体验。

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