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

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

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