CSS实现loading加载动画

燕子_43541158

已于 2023-04-25 12:00:17 修改

阅读量1k

点赞数

文章标签： css 动画 css3

于 2023-04-25 11:56:51 首次发布

本文链接：https://blog.csdn.net/weixin_43541158/article/details/130361558

版权

这里写自定义目录标题

一、效果

在这里插入图片描述

二、思路：

1、动画效果从0%到100%，loading的每条线从灰色变成跟背景色一样颜色（例子中是白色），就实现线条的显示和隐藏；

2、所有线共同属性设置动画 循环播放:
animation: f_fadeG 0.932s infinite;

3、每条线设置不同的动画延迟时间animation-delay，让它们陆续从灰色变成背景色（视觉上就实现效果了）

三、代码实现

<style>
.incorrect-icon {
    position: relative;
    width: 44px;
    height: 42px;
    transform: scale(0.8);
}
.f_circleG {
    position: absolute;
    width: 3px;
    height: 9px;
    /* border-radius:9px 9px 0 0; */
    animation: f_fadeG 0.932s infinite;
}
#frotateG_01 {
    left: 3px;
    top: 21px;
    animation-delay: 0.3495s;
    transform:rotate(-90deg)
}
#frotateG_02 {
    left: 7px;
    top: 13px;
    animation-delay: 0.466s;
    transform:rotate(-45deg);
}
#frotateG_03 {
    left: 16px;
    top: 10px;
    animation-delay: 0.5825s;
    transform:rotate(0deg);
}
#frotateG_04 {
    right: 16px;
    top: 13px;
    animation-delay: 0.699s;
    transform:rotate(45deg);
}
#frotateG_05 {
    right: 12px;
    top: 22px;
    animation-delay: 0.8155s;
    transform:rotate(90deg);
}
#frotateG_06 {
    right: 17px;
    bottom: 3px;
    animation-delay: 0.932s;
    transform:rotate(135deg);
}
#frotateG_07 {
    left: 16px;
    bottom: 0px;
    animation-delay: 1.0485s;
    transform:rotate(180deg);
}
#frotateG_08 {
    left: 7px;
    bottom: 3px;
    animation-delay: 1.165s;
    transform:rotate(-135deg);
}
@keyframes f_fadeG {
    // loading的每条线从灰色变成跟背景色一样颜色（例子中是白色），就实现线条的显示和隐藏
    0% {
        background-color: rgb(207, 205, 205);
    }
    100%{
        background-color: rgb(255,255,255)
    }
}
</style>

<body>
        <div class="fixed-popup" v-if="ftpFileDialog.isVisible">
            <div class="incorrect-icon">
                <div class="f_circleG" id="frotateG_01"></div>
                <div class="f_circleG" id="frotateG_02"></div>
                <div class="f_circleG" id="frotateG_03"></div>
                <div class="f_circleG" id="frotateG_04"></div>
                <div class="f_circleG" id="frotateG_05"></div>
                <div class="f_circleG" id="frotateG_06"></div>
                <div class="f_circleG" id="frotateG_07"></div>
                <div class="f_circleG" id="frotateG_08"></div>
            </div>
            <span>{{数据传输中}}</span>
        </div>
</body>