简要教程
这是一款非常有创意的纯css3导航菜单特效。该导航菜单主要通过css3 transform和transition方法实现效果，非常简单。该特效由進擊的燊提供。
使用方法
html结构
该导航菜单使用一个c787b9a589a3ece771e842a6176cf8e9元素来包裹一组无序列表。
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">docs</a></li>
<li><a href="#">demos</a></li>
<li><a href="#">中文</a></li>
</ul>
</nav>
css样式
该导航菜单在鼠标滑过菜单项时，菜单项稍稍有些倾斜动画，并且在该菜单项的上下会有两条线条滑出。菜单项的倾斜动画是在菜单项被鼠标滑过时，使用transform属性来对超链接元素进行旋转和缩放。
li a {
display: block;
font-size: 20px;
text-align: center;
padding: 10px 15px;
}
li a:hover {
transform: rotate(5deg) scale(1.1);
}
菜单项的上下2条线条使用超链接元素的:before和:after伪元素来制作。它们开始时透明度为0，宽度为0，并使用transform属性将它们旋转和移动。
li a:before, li a:after {
opacity: 0;
border-top: 1px solid white;
content: '';
display: block;
position: relative;
z-index: -1;
margin: auto;
width: 0px;
}
li a:before {
top: 0px;
transform: rotate(120deg) translatey(-50%) translatex(-50%);
}
li a:after {
top: 5px;
transform: rotate(-60deg) translatey(-50%) translatex(-50%);
}
在鼠标滑过时，它们的透明度变为1，宽度设置为20像素，并采用ease效果的平滑过渡。
li a:hover:before, li a:hover:after{
transition: all 0.3s ease;
opacity: 1;
width: 20px;
}
以上就是纯css3创意导航菜单特效的内容。