css3带缺口圆环的步骤条进度条动画制作

在网上找了好久的步骤条插件，可惜不尽人意，只能自己动手写一个，下面直接展示效果图

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%;
           }
                } 

html结构：

<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>

html结构

 	<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>

js代码：

<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>

具体语法请参考本类目下的其他博文