[分享]css3怎么设置loading

CSS3是一种非常强大的前端开发语言，它可以用来实现许多动态效果，其中包括了加载动画。使用CSS3制作loading动画非常简单，下面就来讲讲如何设置。.loadingcontainer{ : fix...

CSS3是一种非常强大的前端开发语言，它可以用来实现许多动态效果，其中包括了加载动画。使用CSS3制作loading动画非常简单，下面就来讲讲如何设置。

.loading-container{
    position: fixed; //设置为固定定位
    left: 50%; //居中显示
    top: 50%;
    transform: translate(-50%, -50%); //使用transform来实现居中
    z-index: 999; //避免被其他元素遮盖
}

.loading{
    width: 50px;
    height: 50px;
    background-color: #000;
    border-radius: 50%; //设置为圆形
    animation: rotate .8s infinite linear; //使用animation来制作旋转动画并无限循环
}

@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
} 

以上是制作loading动画所需的CSS代码，具体解释见注释。

此时，我们只需要在HTML文件中添加一个loading容器和一个loading元素即可。

<div class="loading-container">
    <div class="loading"></div> //loading元素
</div> 

这样，我们就成功制作了一个简单却实用的loading动画。