下划线滑动,
最后一个li空着,留着后面有用,通过绝对定位,把最后一个 li.quebec 定位到导航下方,设置宽度高度。设置 transition,当我们改变 left, width的时候就能实现动画。
<div class="info">
<ul>
<li class="community"><a >社区</a></li>
<li class="support"><a >支持</a></li>
<li class="more"><a >更多</a></li>
<li class="line"> </li>
</ul>
</div>
css 样式:
ul {
position: relative;
overflow: hidden;
padding-left: 0px;
}
li {
list-style: none outside;
position: relative;
z-index: 1;
float: left;
margin-right: 10px;
}
li a {
position: relative;
width: 100px;
color:#333 ;
display: block;
margin: 0 0;
border-bottom: 5px solid transparent;
padding: 10px 0;
text-align: center;
text-decoration: none;
}
.selected a {
border-bottom: 5px solid #cfd0d0;
color: #511d7f;
}
最后一个li空着,留着后面有用。(css样式就不多解释了啊)
实现导航下划线
下面实现动画部分。
下方紫色滚动条是通过,刚才留着的最后一个li元素实现。
.line {
position: absolute;
bottom: 0px;
left: -100px;
z-index: 3;
margin: 0;
border: 0;
width: 5px;
height: 5px;
padding: 0;
overflow: hidden;
background: #511d7f;
-webkit-transition-property: left, width;
-moz-transition-property: left, width;
-o-transition-property: left, width;
transition-property: left, width;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
}
注释:z-index 属性设置元素的堆叠顺序。But只能在定位元素奏效(position:)
overflow是对内容溢出元素框做的处理事情。
transition-property是实现下划线动画效果;
transition-duration 完成动画的时间;
-webkit:适配Safari 和 Chrome 浏览器
-moz:适配Firefox4浏览器
-o:适配Opera浏览器
当hover到导航上面的时候,li.quebec 就定位left到其下面。实现这个效果的是css3的同级通用选择器 “~”
比如 A ~ B 匹配的是 任何在A元素之后的同级B元素。
.community:hover ~ li.line { left: 5px; width: 110px; }
.support:hover ~ li.line { left: 115px; width: 110px; }
.more:hover ~ li.line { left: 225px; width: 110px; }
so这里就完成了一个 纯css的下划线动画导航。
为了效果更炫一点,我们还可以在hover不同li的时候,改变li.line的颜色、背景、透明度等。