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");
}
});