基于CSS3飘带状3D菜单 菜单带小图标_html/css_WEB-ITnose

这次我们要来分享一款很特别的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