纯CSS3创意导航菜单特效

当前位置:主页 > CSS3库 > css3导航菜单 > 纯CSS3创意导航菜单特效
纯CSS3创意导航菜单特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-03-08
    阅读:
简要教程

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

关于作者

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

该导航菜单特效的codepen演示地址为:http://codepen.io/lushen/pen/qZbBQx

网友评论