基于CSS3飘带状3D菜单 菜单带小图标

浏览数：34 / 时间：2015年06月09日

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

技术分享

在线预览   源码下载

实现的代码。

htmll代码：

Html代码  技术分享
  1. <nav>  
  2.         <menu>  
  3.             <li><a href="#"><span>t</span> <span>twitter</span> </a></li>  
  4.             <li id="at"><a href="#"><span>c</span> <span>codepen</span> </a></li>  
  5.             <li><a href="#"><span>d</span> <span>dribbble</span> </a></li>  
  6.             <li><a href="#"><span>g</span> <span>google+</span> </a></li>  
  7.         </menu>  
  8.         <div class="ribbon left">  
  9.         </div>  
  10.         <div class="ribbon right">  
  11.         </div>  
  12.     </nav>  

 css代码：

Html代码  技术分享
  1. *  
  2.         {  
  3.             padding: 0;  
  4.             margin: 0;  
  5.             border: 0;  
  6.         }  
  7.         *:after, *:before  
  8.         {  
  9.             display: block;  
  10.             content: "";  
  11.             position: absolute;  
  12.         }  
  13.         body  
  14.         {  
  15.             #3d332a;  
  16.             background-image: url(‘9690bg.jpg‘);  
  17.             padding-top: 50px;  
  18.         }  
  19.         nav  
  20.         {  
  21.             width: 476px;  
  22.             margin: auto;  
  23.             position: relative;  
  24.         }  
  25.         menu:after, menu:before  
  26.         {  
  27.             top: 0;  
  28.             width: 60px;  
  29.             height: 76px;  
  30.             background: #eae2d5;  
  31.         }  
  32.         menu:after  
  33.         {  
  34.             clear: both;  
  35.             right: -61px;  
  36.             border-right: 1px solid #857e74;  
  37.         }  
  38.         menu:before  
  39.         {  
  40.             left: -55px;  
  41.             border-left: 1px solid #857e74;  
  42.         }  
  43.         .ribbon  
  44.         {  
  45.             position: absolute;  
  46.             top: 76px;  
  47.             border-style: solid;  
  48.             border-width: 13px;  
  49.         }  
  50.         .ribbon.left  
  51.         {  
  52.             left: -55px;  
  53.             border-color: #857e74 #857e74 transparent transparent;  
  54.         }  
  55.         .ribbon.right  
  56.         {  
  57.             left: 511px;  
  58.             border-color: #857e74 transparent transparent #857e74;  
  59.         }  
  60.         .left:after, .left:before  
  61.         {  
  62.             left: -68px;  
  63.             border-style: solid;  
  64.             z-index: -2;  
  65.         }  
  66.         .left:after  
  67.         {  
  68.             top: -68px;  
  69.             border-width: 58px 0 0 56px;  
  70.             border-color: #eae2d5 transparent transparent transparent;  
  71.         }  
  72.         .left:before  
  73.         {  
  74.             top: -26px;  
  75.             border-width: 0 40px 38px 41px;  
  76.             border-color: transparent transparent #eae2d5 transparent;  
  77.         }  
  78.         .right:after, .right:before  
  79.         {  
  80.             right: -65px;  
  81.             border-style: solid;  
  82.             z-index: -2;  
  83.         }  
  84.         .right:before  
  85.         {  
  86.             top: -25px;  
  87.             border-width: 0 40px 38px 38px;  
  88.             border-color: transparent transparent #eae2d5 transparent;  
  89.         }  
  90.         .right:after  
  91.         {  
  92.             top: -65px;  
  93.             border-width: 58px 56px 0 0;  
  94.             border-color: #eae2d5 transparent transparent transparent;  
  95.         }  
  96.         li  
  97.         {  
  98.             float: left;  
  99.             position: relative;  
  100.             margin-left: 33px;  
  101.             cursor: pointer;  
  102.             #eae2d5;  
  103.             list-style-type: none;  
  104.             border-left: 2px solid #d7cfc2;  
  105.             border-right: 2px solid #d7cfc2;  
  106.             transition: margin .1s ,padding .1s ,border 1s;  
  107.         }  
  108.         li:first-child  
  109.         {  
  110.             margin-left: 20px;  
  111.         }  
  112.         li:before, li:after  
  113.         {  
  114.             display: block;  
  115.             position: absolute;  
  116.             top: 0;  
  117.             width: 20px;  
  118.             height: 100%;  
  119.             background: inherit;  
  120.             transition: all .1s;  
  121.         }  
  122.         li:before  
  123.         {  
  124.             right: 100%;  
  125.         }  
  126.         li:after  
  127.         {  
  128.             left: 100%;  
  129.         }  
  130.         li:hover  
  131.         {  
  132.             margin-top: -9px;  
  133.             box-shadow: 0 4px 10px 0px #000;  
  134.             transition: margin .2s ,padding .2s;  
  135.         }  
  136.         li:hover:before, li:hover:after  
  137.         {  
  138.             height: 86%;  
  139.             background: #d7cfc2;  
  140.             transition: all .2s;  
  141.         }  
  142.         li:hover:before  
  143.         {  
  144.             transform: rotate(-30deg) skew(-30deg) translate(1.5px,9px);  
  145.         }  
  146.         li:hover:after  
  147.         {  
  148.             transform: rotate(30deg) skew(30deg) translate(-1.5px,9px);  
  149.         }  
  150.         a  
  151.         {  
  152.             display: block;  
  153.             padding: 10px 15px;  
  154.             text-decoration: none;  
  155.             text-align: center;  
  156.         }  
  157.         a span  
  158.         {  
  159.             text-shadow: 1px 1px 1px #FFF;  
  160.             color: #857e74;  
  161.             transition: all .2s;  
  162.         }  
  163.         a span:first-child  
  164.         {  
  165.             font-family: icon;  
  166.             font-size: 33px;  
  167.             display: block;  
  168.         }  
  169.         a span:last-child  
  170.         {  
  171.             text-transform: capitalize;  
  172.             font-family: ‘Georgia‘;  
  173.             font-size: 11px;  
  174.             letter-spacing: 1px;  
  175.             font-style: italic;  
  176.             color: #6488ba;  
  177.         }  
  178.         li:hover span  
  179.         {  
  180.             transition: all .2s;  
  181.         }  
  182.         li:hover a span:first-child  
  183.         {  
  184.             color: #6488ba;  
  185.             text-shadow: 1px 1px 1px #FFF , 0 0 1px #6488ba;  
  186.         }  
  187.         li:hover a span:last-child  
  188.         {  
  189.             color: #857e74;  
  190.         }  
  191.         @font-face  
  192.         {  
  193.             font-family: icon;  
  194.             src: url(‘http://bennettfeely.com/fonts/icons.woff‘);  
  195.         }  

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style com 代码 src http html si it class style com 代码 src http html si it

相关文章

随机文章

您可能还喜欢

您可能还喜欢