zoukankan      html  css  js  c++  java
  • 基于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

  • 相关阅读:
    HDU 5835 Danganronpa 贪心
    HDU 5842 Lweb and String 水题
    HDU 5832 A water problem 水题
    Codeforces Beta Round #14 (Div. 2) A. Letter 水题
    Western Subregional of NEERC, Minsk, Wednesday, November 4, 2015 Problem K. UTF-8 Decoder 模拟题
    Western Subregional of NEERC, Minsk, Wednesday, November 4, 2015 Problem I. Alien Rectangles 数学
    Western Subregional of NEERC, Minsk, Wednesday, November 4, 2015 Problem H. Parallel Worlds 计算几何
    Western Subregional of NEERC, Minsk, Wednesday, November 4, 2015 Problem F. Turning Grille 暴力
    Western Subregional of NEERC, Minsk, Wednesday, November 4, 2015 Problem C. Cargo Transportation 暴力
    Western Subregional of NEERC, Minsk, Wednesday, November 4, 2015 Problem G. k-palindrome dp
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4346947.html
Copyright © 2011-2022 走看看