纯css实现Magicline Navigation(下划线动画导航菜单)
发布于 2016-01-11 17:13:56 | 217 次阅读 | 评论: 0 | 来源: PHPERZ
CSS层叠样式表
CSS（层叠样式表） 即 级联样式表 。
它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
看别人网站的时候，看到一种导航菜单的动画，觉得很有意思，就仔细研究起来。
目前见过的动画有三种：水平下划线动画导航、水平背景动画导航、垂直动画导航，他们实现思路都是一样的，都是依赖 css3的同级通用选择器 "~" 。
自己实现了一遍，本文简要记录实现的思想。
大家可以先看看最后实现的效果：Demo点我
实现思路
HTML 结构
HTML结构没有特殊，就是 ul -> li:
<ul class="a">
<li class="n1"><a href="#">Navigator A</a></li>
<li class="n2"><a href="#">Navigator B</a></li>
<li class="n3 selected"><a href="#">Navigator C</a></li>
<li class="n4"><a href="#">Navigator D</a></li>
<li class="quebec"> </li>
</ul>
最后一个li空着，留着后面有用。
CSS 布局
实现基本样式，不多解释：
ul {
position: relative;
overflow: hidden;
padding-left: 0px;
}
li {
list-style: none outside;
position: relative;
z-index: 1;
float: left;
padding: 0 0 0 0;
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元素实现。
.quebec {
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;
-ms-transition-property: left, width;
-o-transition-property: left, width;
transition-property: left, width;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-ms-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
}
通过绝对定位，把最后一个 li.quebec 定位到导航下方，设置宽度高度。设置 transition，当我们改变 left, width的时候就能实现动画。
动起来
当hover到导航上面的时候，li.quebec 就定位left到其下面。实现这个效果的是css3的同级通用选择器 “～”
比如 A ~ B 匹配的是 任何在A元素之后的同级B元素。
.n1:hover ~ li.quebec { left: 5px; width: 110px; }
.n2:hover ~ li.quebec { left: 115px; width: 110px; }
.n3:hover ~ li.quebec { left: 225px; width: 110px; }
.n4:hover ~ li.quebec { left: 335px; width: 110px; }
这里就完成了一个 纯css的下划线动画导航。 最后的效果：Demo查看
扩展
当我们会实现水平的下划线动画导航后，实现 背景移动动画导航 思路也是一样，不过是li.quebec高度宽度的变化，背景透明度的变化。
垂直的动画导航 亦是如此，改变 li.quebec 的高度宽度，通过 translateY 控制其在垂直方向的位置。
为了效果更炫一点，我们还可以在hover不同li的时候，改变li.quebec的颜色、背景、透明度等。
相关阅读 :
纯css实现Magicline Navigation(下划线动画导航菜单)
纯CSS实现扑克牌效果
纯CSS实现的漂亮的立体图片边框效果，阴影代码
纯CSS实现的当鼠标移上图片添加阴影效果代码
css实现导航下拉菜单的示例
纯css下拉菜单 无需js
CSS实现悬浮出现双括号示例代码
利用CSS实现居中对齐
css实现input文本框的双边框美化
利用HTML和CSS实现常见的布局
我就是要用CSS实现
CSS实现垂直居中的常用方法