基于CSS3飘带状3D菜单 菜单带小图标这次我们要来分享一款很特别的CSS3菜单，菜单的外观是飘带状的，并且每一个菜单项有一个精美的小图标，鼠标滑过菜单项时，菜单项就会向上凸起，像是飘带飘动一样，形成非常酷的3D视觉效果。这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航。
在线预览源码下载
实现的代码。
htmll代码：
Html代码<nav><menu><li><ahref="#"><span>t</span><span>twitter</span></a></li><liid="at"><ahref="#"><span>c</span><span>codepen</span></a></li><li><ahref="#"><span>d</span><span>dribbble</span></a></li><li><ahref="#"><span>g</span><span>google+</span></a></li></menu><divclass="ribbonleft"></div><divclass="ribbonright"></div></nav>css代码：
Html代码*{padding:0;margin:0;border:0;}*:after,*:before{display:block;content:"";position:absolute;}body{#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:1pxsolid#857e74;}menu:before{left:-55px;border-left:1pxsolid#857e74;}.ribbon{position:absolute;top:76px;border-style:solid;border-width:13px;}.ribbon.left{left:-55px;border-color:#857e74#857e74transparenttransparent;}.ribbon.right{left:511px;border-color:#857e74transparenttransparent#857e74;}.left:after,.left:before{left:-68px;border-style:solid;z-index:-2;}.left:after{top:-68px;border-width:58px0056px;border-color:#eae2d5transparenttransparenttransparent;}.left:before{top:-26px;border-width:040px38px41px;border-color:transparenttransparent#eae2d5transparent;}.right:after,.right:before{right:-65px;border-style:solid;z-index:-2;}.right:before{top:-25px;border-width:040px38px38px;border-color:transparenttransparent#eae2d5transparent;}.right:after{top:-65px;border-width:58px56px00;border-color:#eae2d5transparenttransparenttransparent;}li{float:left;position:relative;margin-left:33px;cursor:pointer;#eae2d5;list-style-type:none;border-left:2pxsolid#d7cfc2;border-right:2pxsolid#d7cfc2;transition:margin.1s,padding.1s,border1s;}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:04px10px0px#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:10px15px;text-decoration:none;text-align:center;}aspan{text-shadow:1px1px1px#FFF;color:#857e74;transition:all.2s;}aspan:first-child{font-family:icon;font-size:33px;display:block;}aspan:last-child{text-transform:capitalize;font-family:'Georgia';font-size:11px;letter-spacing:1px;font-style:italic;color:#6488ba;}li:hoverspan