css3 仿涂鸦网进度条

css

.join-step {
    height: 80px;
    position: relative;
    z-index: 99;
}
.join-step .step-line-bg {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: 3px;
    background: -webkit-linear-gradient(90deg,#264e8d,#111d42,#264e8d);
    background: linear-gradient(90deg,#264e8d,#111d42,#264e8d);
    z-index: 10;
}
.join-step .step-line-bg .step-line {
    width: 25%;
    height: 100%;
    -webkit-transition: width .5s;
    transition: width .5s;
    background: -webkit-linear-gradient(90deg,#0c1729,#ff8000,#ff8000);
    background: linear-gradient(90deg,#0c1729,#ff8000,#ff8000);
}
.join-step ul li {
    float: left;
    position: relative;
    width: 20%;
    z-index: 99;
}
.join-step ul li h3 {
    width: 150px;
    margin: 0 auto;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background: -webkit-linear-gradient(to bottom, #2e2261, #473b78 100%);
    background: linear-gradient(to bottom, #2e2261, #473b78 100%);
    cursor: pointer;
}
.join-step ul li h3:hover,
.join-step ul li.active h3 {
    background: -webkit-linear-gradient(90deg,#ff8000,#ff8000);
    background: linear-gradient(90deg,#ff8000,#ff8000);
    color: #ffffff;
}

运用了css3 

transition

当元素从一种样式变换为另一种样式时为元素添加效果

过渡属性

下面的表格列出了所有的转换属性：

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

下面的两个例子设置所有过渡属性：

linear-gradient

可以让你在两个或多个指定的颜色之间显示平稳的过渡

值	描述
direction	用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,...	用于指定渐变的起止颜色。

html

<div class="join-step">
          <div class="container step-tab">
            <ul class="clearfix">
              <li class="active" data-item="demand"><h3>需求洽谈</h3></li>
              <li data-item="technology"><h3>技术对接</h3></li>
              <li data-item="development"><h3>产品研发</h3></li>
              <li data-item="debugging"><h3>联合调试</h3></li>
              <li data-item="online"><h3>产品上线</h3></li>
            </ul>
          </div>
          <div class="step-line-bg">
            <div class="step-line"></div>
          </div>
        </div>

js

$('.step-tab li').hover(function() {
        var dataItem = $(this).attr('data-item');
        // 获取距离左边的距离
        var leftWidth = $(this).find('h3').offset().left;
        // 如果是最后一个tab，则让宽带为100%
        if(dataItem == 'online') {
            leftWidth = $(window).width();
        }
        $('.step-line-bg .step-line').css('width', leftWidth + 'px');
        if(!$(this).hasClass('active')) {
            $(this).siblings().removeClass('active');
            $('.step-content .step-info').hide().removeClass("active");
            $(this).addClass('active');
            $('.step-content #'+dataItem).slideDown("slow").addClass("active");
        }
    });