css3带缺口圆环的步骤条进度条动画制作
程序员文章站
2022-06-07 11:17:07
...
在网上找了好久的步骤条插件，可惜不尽人意，只能自己动手写一个，下面直接展示效果图
1.首先是带缺口圆环动画的制作
思路:一个圆加两个小圆(圆颜色与背景颜色一致),小圆遮盖住大圆环形成缺口,动画执行(0到360deg)
.round {
position: relative;
width: 100px;
height: 100px;
display: inline-block;
animation: move 2s infinite linear;
}
.round .out-round {
width: 100px;
height: 100px;
line-height: 100px;
border: 1px solid red;/* 圆环 */
}
.round .emp-round {
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
background-color: white;/* 小圆颜色应该与背景颜色一致 */
}
.round .r1 {
left: 50px;
top: 0;
}/* 小圆1位置 */
.round .r2 {
bottom: 0;
left: 30px;
}/* 小圆2位置 */
@keyframes move {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
} html结构：
<div class="round" >
<div class="out-round img-circle"></div><!-- img-circle是bootstrap的样式类使div为圆形 -->
<div class="emp-round r1"></div><!-- 小圆1 -->
<div class="emp-round r2"></div><!-- 小圆2 -->
</div> 效果展示：
2.进度条的制作，结构采用bootstrap的进度条样式，并发现若想要进度条动起来只需让类名为progress-bar的div宽度由0%变为100%即可，颜色可任意设置
.bar-mv {
background-color: blue;/* 即进度条的颜色 */
animation: move2 4s linear forwards;/* forwards是当进度为100%时保留在这一属性 */
}
.bar{
height: 10px;
width: 100%;
margin-top: 50px;
background-color: #315971;
}
@keyframes move2 {
from {
width: 0%;
}
to {
width: 100%;
}
} <div class="progress">
<div class="progress-bar bar-mv" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
3.最终实现的效果是页面加载时进度条动起来到达第二步，点击按钮由第二步运动到第三步，整体代码如下
1.步骤未**时使用的类是all-unactive,**时使用all-active
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js "></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style>
.box1 {
background-color: #338cc3;
display: flex;
justify-content: space-between;
padding: 20px;
}
.round {
position: relative;
width: 100px;
height: 100px;
display: inline-block;
}/* 相对定位 */
@keyframes move {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@keyframes move2 {
from {
width: 0%;
}
to {
width: 100%;
}
}
.round .out-round {
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
}
.round .emp-round {
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
background-color: #338cc3;;
}/* 绝对定位 */
.round .r1 {
left: 50px;
top: 0;
}
.round .r2 {
bottom: 0;
left: 30px;
}
.inner-round {
position: absolute;
width: 80px;
height: 80px;
left: 11px;
top: 10px;
line-height: 80px;
font-size: 40px;
}
.bar{
height: 5px;
width: 100%;
margin-top: 50px;
background-color: #315971;
}
.bar-active {
height: 5px;
width: 100%;
margin-top: 50px;
background-color: white;
}
.all{
position: relative;
}
.all-active .round {
animation: move 2s infinite linear;
}
.all-active .round .out-round {
border: 1px solid white;
}
.all-active .inner-round {
background-color: white;
color: lightskyblue;
}
.all-active .text {
color: white;
font-size:12px;
}
.all-unactive .round .out-round {
border: 1px solid #315971;
}
.all-unactive .inner-round {
background-color: #315971;
color: white;
}
.all-unactive .text {
color: #04283e;
font-size:12px;
}
.bar-mv {
background-color: white;
animation: move2 1s linear forwards;
}
</style> <div class=" box1" >
<div class="progress bar-active">
<div class="progress-bar " role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="all all-active">
<div class="round">
<div class="out-round img-circle"></div><!-- 外部圆环 -->
<div class="emp-round r1"></div><!-- 小圆1 -->
<div class="emp-round r2"></div><!-- 小圆2 -->
</div>
<div class="img-circle inner-round text-center ">1</div>
<div class="text text-center ">第一步</div>
</div>
<div class="progress bar">
<div class="progress-bar bar-mv" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="all all-unactive">
<div class="round">
<div class="out-round img-circle"></div>
<div class="emp-round r1"></div>
<div class="emp-round r2"></div>
</div>
<div class="img-circle inner-round text-center">2</div>
<div class="text text-center">第二步</div>
</div>
<div class="progress bar">
<div class="progress-bar " role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="all all-unactive">
<div class="round">
<div class="out-round img-circle"></div>
<div class="emp-round r1"></div>
<div class="emp-round r2"></div>
</div>
<div class="img-circle inner-round text-center">3</div>
<div class="text text-center">第三步</div>
</div>
<div class="progress bar">
<div class="progress-bar " role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<button id="start" class="btn btn-info">按钮</button><script>
$(function () {
setTimeout(function () {
$(".bar-mv").parent().next().removeClass("all-unactive").addClass("all-active");
$("#start").on('click',function () {
$(".bar").eq(1).children().addClass("bar-mv");
setTimeout(function () {
$(".bar").eq(1).next().removeClass("all-unactive").addClass("all-active");
$(".bar").eq(2).children().addClass("bar-mv");
},1000)
})
},1000)
})
</script>上一篇： 明朝末年锦衣卫人数有十万人之多 为何崇祯上吊时没有调动他们呢
下一篇： React实现步骤条引导