CSS+JS实现进度条动画
之前学习了导航条,那现在就来学习一下进度条。本次的学习试着写了两种风格的进度条,一种是圆点,一种是传统的条状。如下图:
简单介绍一下,点击按钮之后,圆点的效果是蓝色部分从零开始变大,到充满了整个父标签,从左向右进行;传统条状的效果就单纯的从左向右进行。由于有光晕的效果,父标签应该允许溢出部分显示。再次点击按钮就重置为原来的样子。
话不多说,直接开始。
HTML部分
HTML部分很简单,只需要几个div和li就好,当然还有中间的按钮。
<!-- 圆点进度条 -->
<div class="div1">
<ul class="ul">
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
<button class="btn" οnclick="goLoad()">开始/重置</button>
</div>
<hr>
<!-- 条状进度条 -->
<div class="div2">
<div class="line-box">
<div class="line"></div>
</div>
</div>
CSS部分
圆点进度条
基本样式:
.div1{
position: relative;
width: 100%;
height:calc(33.33vh);
}
.ul{
position: absolute;
height: 32px;
width: 190px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.ul::after{
content: "";
clear: both;
display: block;
overflow:hidden;
}
.ul li{
position: relative;
list-style: none;
width: 30px;
height