你的位置:首页 > 网页设计

[网页设计]基于CSS3飘带状3D菜单 菜单带小图标


这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果。这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航。

在线预览   源码下载

实现的代码。

htmll代码:

 <nav>    <menu>      <li><a href="#"><span>t</span> <span>twitter</span> </a></li>      <li id="at"><a href="#"><span>c</span> <span>codepen</span> </a></li>      <li><a href="#"><span>d</span> <span>dribbble</span> </a></li>      <li><a href="#"><span>g</span> <span>google+</span> </a></li>    </menu>    <div class="ribbon left">    </div>    <div class="ribbon right">    </div>  </nav>

css代码:

 *    {      padding: 0;      margin: 0;      border: 0;    }    *:after, *:before    {      display: block;      content: "";      position: absolute;    }    body    {      background-color: #3d332a;      background-image: url('9690bg.jpg');      padding-top: 50px;    }    nav    {      width: 476px;      margin: auto;      position: relative;    }    menu:after, menu:before    {      top: 0;      width: 60px;      height: 76px;      background: #eae2d5;    }    menu:after    {      clear: both;      right: -61px;      border-right: 1px solid #857e74;    }    menu:before    {      left: -55px;      border-left: 1px solid #857e74;    }    .ribbon    {      position: absolute;      top: 76px;      border-style: solid;      border-width: 13px;    }    .ribbon.left    {      left: -55px;      border-color: #857e74 #857e74 transparent transparent;    }    .ribbon.right    {      left: 511px;      border-color: #857e74 transparent transparent #857e74;    }    .left:after, .left:before    {      left: -68px;      border-style: solid;      z-index: -2;    }    .left:after    {      top: -68px;      border-width: 58px 0 0 56px;      border-color: #eae2d5 transparent transparent transparent;    }    .left:before    {      top: -26px;      border-width: 0 40px 38px 41px;      border-color: transparent transparent #eae2d5 transparent;    }    .right:after, .right:before    {      right: -65px;      border-style: solid;      z-index: -2;    }    .right:before    {      top: -25px;      border-width: 0 40px 38px 38px;      border-color: transparent transparent #eae2d5 transparent;    }    .right:after    {      top: -65px;      border-width: 58px 56px 0 0;      border-color: #eae2d5 transparent transparent transparent;    }    li    {      float: left;      position: relative;      margin-left: 33px;      cursor: pointer;      background-color: #eae2d5;      list-style-type: none;      border-left: 2px solid #d7cfc2;      border-right: 2px solid #d7cfc2;      transition: margin .1s ,padding .1s ,border 1s;    }    li:first-child    {      margin-left: 20px;    }    li:before, li:after    {      display: block;      position: absolute;      top: 0;      width: 20px;      height: 100%;      background: inherit;      transition: all .1s;    }    li:before    {      right: 100%;    }    li:after    {      left: 100%;    }    li:hover    {      margin-top: -9px;      box-shadow: 0 4px 10px 0px #000;      transition: margin .2s ,padding .2s;    }    li:hover:before, li:hover:after    {      height: 86%;      background: #d7cfc2;      transition: all .2s;    }    li:hover:before    {      transform: rotate(-30deg) skew(-30deg) translate(1.5px,9px);    }    li:hover:after    {      transform: rotate(30deg) skew(30deg) translate(-1.5px,9px);    }    a    {      display: block;      padding: 10px 15px;      text-decoration: none;      text-align: center;    }    a span    {      text-shadow: 1px 1px 1px #FFF;      color: #857e74;      transition: all .2s;    }    a span:first-child    {      font-family: icon;      font-size: 33px;      display: block;    }    a span:last-child    {      text-transform: capitalize;      font-family: 'Georgia';      font-size: 11px;      letter-spacing: 1px;      font-style: italic;      color: #6488ba;    }    li:hover span    {      transition: all .2s;    }    li:hover a span:first-child    {      color: #6488ba;      text-shadow: 1px 1px 1px #FFF , 0 0 1px #6488ba;    }    li:hover a span:last-child    {      color: #857e74;    }    @font-face    {      font-family: icon;      src: url('http://bennettfeely.com/fonts/icons.woff');    }

via:http://www.w2bc.com/Article/27670