html炫酷的导航栏效果,纯CSS3创意导航菜单特效

这是一款非常有创意的纯CSS3导航菜单特效。该导航菜单主要通过CSS3 transform和transition方法实现效果，非常简单。该特效由進擊的燊提供。

使用方法

HTML结构

该导航菜单使用一个元素来包裹一组无序列表。

• Home
• Docs
• Demos
• 中文

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;

}

关于作者

该导航菜单特效作者：進擊的燊。他的个人联系方式有：