导航菜单
纯CSS3创意导航菜单特效
PetitQ
这是一款非常有创意的纯 CSS3 导航菜单特效。该导航菜单主要通过 CSS3 transform 和 transition 方法实现效果，非常简单。该特效由進擊的燊提供。
HTML 结构
该导航菜单使用一个<nav>元素来包裹一组无序列表。
也想出现在这里？联系我们吧
<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;
}
| 演示地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
