3D效果导航代码

Posted 2020-08-14 怪咖咖

        *, *:before, *:after {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }

            .menu {
                list-style: none;
                width: 1280px;
                height: 40px;
                margin: 50px auto;
                box-shadow: 0 0 4px rgba(0, 0, 0, .5);
            }
            .menu li {
                float: left;
            }
            .menu li a {
                display: inline-block;
                color: #666;
                background-color: #eee;
                text-decoration: none;
                position: relative;
            }
            .menu li a::before {
                content: attr(title);
                color: #888;
                background-color: #aaa;
                position: absolute;
                left: 0;
                top: 0;
                  -moz-transform: rotateX(-90deg);
                -webkit-transform: rotateX(-90deg);
            }
            .menu li a::after {
                content: attr(title);
                color: #fff;
                background-color: #666;
                position: absolute;
                left: 0;
                top: 0;
                 -moz-transform: rotateX(-180deg);
                -webkit-transform: rotateX(-180deg);
            }
            .menu li a, .menu li a::before, .menu li a::after {
                width: 120px;
                height: 40px;
                text-align: center;
                font-size: 14px;
                line-height: 40px;
                border: 1px solid #ddd;
                border-width: 0 1px 0 0;
                transition: all 1s;
                 -moz-transform-style: preserve-3d;
                -moz-transform-origin: center center -20px;
                -webkit-transform-style: preserve-3d;
                -webkit-transform-origin: center center -20px;
            }
            .menu li:hover a, .menu li a.cur {
                  -moz-transform: rotateX(180deg);
                -webkit-transform: rotateX(180deg);
            }    
            @media (max-width: 1980px) {
                .menu {
                    width:80%;
                    height: 40px;
                }
                .menu li {
                    width: 12.5%;
                }
                .menu li a, .menu li a::before, .menu li a::after {
                    width: 100%;
                }
            }
            @media (max-width: 768px) {
                .menu {
                    width: 100%;
                    height: 80px;
                }
                .menu li {
                    width: 25%;
                }
                .menu li a, .menu li a::before, .menu li a::after {
                    width: 100%;
                    border-width: 0 1px 1px 0;
                }
            }
            @media (max-width: 480px) {
                .menu {
                    width: 100%;
                    height: 160px;
                }
                .menu li {
                    width: 50%;
                }
                .menu li a, .menu li a::before, .menu li a::after {
                    width: 100%;
                    border-width: 0 1px 1px 0;
                }
            }
            @media (max-width: 320px) {
                .menu {
                    width: 100%;
                    height: 320px;
                }
                .menu li {
                    width: 100%;
                }
                .menu li a, .menu li a::before, .menu li a::after {
                    width: 100%;
                    border-width: 0 0 1px 0;
                }
            }
a{font-size:48px;}

<ul class="menu">  
    <li><a title="网站首页" href="#" class="cur" >网站首页</a>  
    </li>  
    <li><a title="行业洞察" href="#">行业洞察</a>  
    </li>  
    <li><a title="解决方案" href="#">解决方案</a>  
    </li>  
    <li><a title="产品商场" href="#">产品商场</a>  
    </li>  
    <li><a title="技术支持" href="#">技术支持</a>  
    </li>  
    <li><a title="媒体中心" href="#">媒体中心</a>  
    </li>  
    <li><a title="加入我们" href="#">加入我们</a>  
    </li>  
    <li><a title="关于我们" href="#">关于我们</a>
  </li></ul>