CSS3菜单项宽度渐变动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3菜单项宽度渐变动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS3菜单项宽度渐变动画</title>
    <style>
@import url(http://fonts.googleapis.com/css?family=Cantora+One);
* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: url(css/nasty_fabric.png);
  margin: .5em;
  font: 1em 'Cantora One', sans-serif;
}

nav[role="full-horizontal"] {
  width: 100%;
}
nav[role="full-horizontal"] ul {
  width: 100%;
  list-style: none;
}
nav[role="full-horizontal"] ul > li {
  position: relative;
  float: left;
  padding: .25em 1em;
  margin: 1.25em 1em;
  text-transform: uppercase;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  border-radius: .75em;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
  transition-property: background, color, padding, border-radius;
  box-shadow: 0.1em -0.1em 0 0.1em rgba(0, 0, 0, 0.2), inset 0 0 0 0.15em rgba(0, 0, 0, 0.4), -0.1em 0.1em 0 0.1em rgba(0, 0, 0, 0.2);
}
nav[role="full-horizontal"] ul > li:after {
  position: absolute;
  z-index: -1;
  content: "";
  right: 0;
  border-radius: 50%;
  box-shadow: 1em 1em 0 2em rgba(255, 255, 255, 0.5);
}
nav[role="full-horizontal"] ul > li:last-child:after {
  box-shadow: none;
}
nav[role="full-horizontal"] ul > li:hover {
  background-color: rgba(251, 93, 0, 0.8);
  padding-left: 3em;
}
nav[role="full-horizontal"] ul > li:hover > a {
  color: #fff;
}
nav[role="full-horizontal"] ul > li > a {
  color: #333;
  text-decoration: none;
  font-size: 1.4em;
  transition: color .3s ease-in-out;
}

/* small screens */
@media screen and (max-width: 44em) {
  body {
    margin: 1.5em 0;
  }

  nav[role="full-horizontal"] ul {
    padding: 0 .5em;
  }
  nav[role="full-horizontal"] ul > li {
    width: 100%;
    padding: .45em .25em;
    margin: 0 0 .55em 0;
  }
  nav[role="full-horizontal"] ul > li:after {
    box-shadow: none;
  }
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
  <nav role="full-horizontal" style="margin:100px 200px;">
    <ul>
        <li><a href="#">Stream</a></li>
        <li><a href="#">Lab</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
</body>
</html>

JS代码(index.js):

 /** Full Horizontal # What? # Part of my "Responsive Menu Concepts" article on CSS-Tricks http://css-tricks.com/responsive-menu-concepts # 2012 by Tim Pietrusky # timpietrusky.com**/

CSS代码(style.css):

@import url(http://fonts.googleapis.com/css?family=Cantora+One);*{box-sizing:border-box;}
html,body{width:100%;height:100%;}
body{background:url(css/nasty_fabric.png);margin:.5em;font:1em 'Cantora One',sans-serif;}
nav[role="full-horizontal"]{width:100%;}
nav[role="full-horizontal"] ul{width:100%;list-style:none;}
nav[role="full-horizontal"] ul > li{position:relative;float:left;padding:.25em 1em;margin:1.25em 1em;text-transform:uppercase;cursor:pointer;background:rgba(255,255,255,0.8);text-align:center;border-radius:.75em;transition-duration:.3s;transition-timing-function:ease-in-out;transition-property:background,color,padding,border-radius;box-shadow:0.1em -0.1em 0 0.1em rgba(0,0,0,0.2),inset 0 0 0 0.15em rgba(0,0,0,0.4),-0.1em 0.1em 0 0.1em rgba(0,0,0,0.2);}
nav[role="full-horizontal"] ul > li:after{position:absolute;z-index:-1;content:"";right:0;border-radius:50%;box-shadow:1em 1em 0 2em rgba(255,255,255,0.5);}
nav[role="full-horizontal"] ul > li:last-child:after{box-shadow:none;}
nav[role="full-horizontal"] ul > li:hover{background-color:rgba(251,93,0,0.8);padding-left:3em;}
nav[role="full-horizontal"] ul > li:hover > a{color:#fff;}
nav[role="full-horizontal"] ul > li > a{color:#333;text-decoration:none;font-size:1.4em;transition:color .3s ease-in-out;}
/* small screens */
@media screen and (max-width:44em){body{margin:1.5em 0;}
nav[role="full-horizontal"] ul{padding:0 .5em;}
nav[role="full-horizontal"] ul > li{width:100%;padding:.45em .25em;margin:0 0 .55em 0;}
nav[role="full-horizontal"] ul > li:after{box-shadow:none;}
}

附件:下载该文件资源,减少时间成本(增值服务)