css3模仿动画精美菜单制作

最新推荐文章于 2023-12-07 14:38:08 发布

晨宇静訫

最新推荐文章于 2023-12-07 14:38:08 发布

阅读量214

点赞数

分类专栏： html5+css3

本文链接：https://blog.youkuaiyun.com/u011629818/article/details/79220673

版权

html5+css3 专栏收录该内容

5 篇文章

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css菜单条</title>
        <style>
            *{margin: 0; padding: 0;}
            ul{ list-style: none;}
            body{background: #3d332a;}
            *:after, *:before { display: block;  content: "";position: absolute;}
            nav{position:relative;width: 480px; margin: 100px auto; }
            nav:before,nav:after{height:76px;width: 30px; background: #eae2d5; }
            nav:after{right: 0;top: 0;}
            nav ul:before{border-left: 1px solid #857e74; z-index: 10;}
            nav ul:after{border-right: 1px solid #857e74; z-index: 10;}
            nav ul {height:76px;/*background: #eae2d5;*/padding-left: 29px;}
            nav ul li{position:relative;float: left;height: 76px;margin:0 18px;background: #eae2d5; font-family: "arial, helvetica, sans-serif"; transition: all .2s;}
            nav ul li a{height:76px; padding:4px 10px 0;text-decoration: none;display: block; text-align: center;box-sizing: border-box;}
            nav ul li a span{display: block;text-shadow: 1px 1px 1px #fff;}
            nav ul li a span:first-child{color: #857e74;font-size: 32px;}
            nav ul li a span:last-child{padding-top:3px;font-size: 12px;font-style: italic; color:#6488ba;letter-spacing: 1px;font-family: 'Georgia';}
            .ribbon{position: absolute;border-width: 13px;border-style: solid;}
            .left{border-color: #857e74 #857e74 transparent transparent;}
            .left:before{left:-64px;top:-69px;border-width: 60px 0 0 50px; border-style: solid; border-color:#eae2d5 #eae2d5 transparent transparent;}
            .left:after{left: -65px; top: -25px; border-width: 0 40px 38px 38px; border-style: solid; border-color:transparent transparent #eae2d5 transparent; z-index: -2;}
            .right{right:0; border-color: #857E74 transparent transparent #857E74; }
            .right:before{right:-64px;top:-70px;border-width: 60px 50px 0 0; border-style: solid; border-color:#eae2d5 transparent transparent #eae2d5;}
            .right:after{right: -65px; top: -25px; border-width: 0 40px 38px 38px; border-style: solid; border-color:transparent transparent #eae2d5 transparent; z-index: -2;}
            nav ul li:hover{margin-top: -10px;}
            nav ul li:before,nav ul li:after{display:block;width: 20px; height: 76px;top: 0px; transition: all .1s;background : inherit;}
            nav ul li:before{left: -20px; }
            nav ul li:after{right: -20px;}
            nav ul li:hover:before{height:66px;background: #d7cfc2;transform: rotate(-30deg) skew(-30deg) translate(1.5px,9px); transition : all .2s;}
            nav ul li:hover:after{height:66px; background: #d7cfc2; transform: rotate(30deg) skew(30deg) translate(-1.5px,9px); 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;}
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href=""><span>t</span><span>twitter</span></a></li>
                <li><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>
            </ul>
            <div class="ribbon left"></div>
            <div class="ribbon right"></div>
        </nav>
    </body>
</html>