纯CSS3创意导航菜单特效

来源：动视网责编：小采时间：2020-11-27 18:53:31

纯CSS3创意导航菜单特效

纯CSS3创意导航菜单特效:简要教程这是一款非常有创意的纯CSS3导航菜单特效。该导航菜单主要通过CSS3 transform和transition方法实现效果，非常简单。该特效由進擊的燊提供。使用方法 HTML结构该导航菜单使用一个<nav>元素来包裹一组无序列表。<nav> <

推荐度：

点击下载本文 文档为doc格式

导读纯CSS3创意导航菜单特效:简要教程这是一款非常有创意的纯CSS3导航菜单特效。该导航菜单主要通过CSS3 transform和transition方法实现效果，非常简单。该特效由進擊的燊提供。使用方法 HTML结构该导航菜单使用一个<nav>元素来包裹一组无序列表。<nav> <

简要教程

这是一款非常有创意的纯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;
}

纯CSS3创意导航菜单特效

推荐度：

点击下载本文 文档为doc格式

标签：创意 css3 菜单效果

热门焦点

纯CSS3创意导航菜单特效

纯CSS3创意导航菜单特效

纯CSS3创意导航菜单特效

最新推荐

猜你喜欢

热门推荐