这里写自定义目录标题
- 一、效果
- 二、思路：
- 三、代码实现
一、效果
二、思路：
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>
