CSS3 实现 loading 动画效果

最新推荐文章于 2024-06-20 13:18:10 发布

ths99

最新推荐文章于 2024-06-20 13:18:10 发布

阅读量1.8k

点赞数 2

分类专栏： CSS 文章标签： CSS CSS3 动画 loading效果

本文链接：https://blog.csdn.net/qq_34123985/article/details/90549234

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在观看视频时经常遇到卡顿，此时屏幕中间通常会有一个圆圈一直在转，作为一种正在加载的显示
其实，它可以通过CSS3的动画实现

实现方法

由围成一个圈的一些小圆点，然后顺时针方向，逐个半径变小，再变大，也就是消失再出现的过程，每个点变小不是同时的，设置相同的时间差，就能形成加载中的视觉效果.
首先，在一个块中绘制4个小圆点，为了明显，先设置一下边框，后面删除即可

<div class="circleBox">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

然后让其固定在屏幕正中央，再分别将4个点放到边框4个角上，如图所示


/*居中显示*/
.circleBox{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -20px;
    width: 40px;
    height: 40px;
    /*border: 1px solid red;*/
}
/*4个点居于四个角*/
p:nth-of-type(1){
    position: absolute;
    left: 0;
    top: 0;
}

p:nth-of-type(2){
    position: absolute;
    right: 0;
    top: 0;
}
p:nth-of-type(3){
    position: absolute;
    right: 0;
    bottom: 0;
}
p:nth-of-type(4){
    position: absolute;
    left: 0;
    bottom: 0;
}

在这里插入图片描述
4个点看着太稀疏，我们上面整个框复制一遍，也放在屏幕正中央，不需要另外写太多CSS代码，然后将其旋转45度,实现下面的效果

/*复制上面的4点环，再旋转45度*/
.circleBox:nth-of-type(2){
    transform: rotate(45deg);
}

在这里插入图片描述
去除边框之后，效果如下

接下来，就是实现圆点相继变小的过程，我们给所有的圆点设置动画，使其依次慢慢消失


@keyframes move{
    0%{
        transform:scale(0);
    }
    50%{
        transform:scale(1);
    }
    100%{
        transform:scale(0);
    }

}

设置时间差


/*设置时间差*/
.circleBox:nth-of-type(1) p:nth-of-type(1){
    animation-delay:-0.1s;
}

.circleBox:nth-of-type(2) p:nth-of-type(4){
    animation-delay:-0.3s;
}

.circleBox:nth-of-type(1) p:nth-of-type(4){
    animation-delay:-0.5s;
}
.circleBox:nth-of-type(2) p:nth-of-type(3){
    animation-delay:-0.7s;
}

.circleBox:nth-of-type(1) p:nth-of-type(3){
    animation-delay:-0.9s;
}

.circleBox:nth-of-type(2) p:nth-of-type(2){
    animation-delay:-1.1s;
}

.circleBox:nth-of-type(1) p:nth-of-type(2){
    animation-delay:-1.3s;
}

.circleBox:nth-of-type(2) p:nth-of-type(1){
    animation-delay:-1.5s;
}