纯css之3D全景导航

3D全景导航.gif

(写在文前的只言片语、意书情殇)长歌破晓穿云过,响彻碧霄振九天.)------Jason Zhang

web开发已现世多年,技术成熟且学习平台广泛,笔者针对其中细节从本质上进行解释.力求透彻.
html部分

---

<ul class="menu cf">
        <li>
            <a href="">网站首页</a>
        </li>
        <li>
            <a href="">关于我们</a>
            <ul class="submenu">
                <li>
                    <a href="">公司介绍</a>

                </li>
                <li>
                    <a href="">企业资质</a>
                </li>
                <li>
                    <a href="">荣誉证书</a>
                </li>
                <li>
                    <a href="">联系我们</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="">产品中心</a>
        </li>
        <li>
            <a href="">成功案例</a>
            <ul class="submenu">
                <li>
                    <a href=""">公司介绍</a>
                </li>
                <li>
                    <a href="">企业资质</a>
                </li>
                <li>
                    <a href="">荣誉证书</a>
                </li>
                <li>
                    <a href="">联系我们</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="">客户留言</a>
        </li>
    </ul>

---

css

---

    * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        
        a,
        img {
            border: 0;
        }
        /* Clearing floats */
        
        .cf:before,
        .cf:after {
            content: " ";
            display: table;
        }
        
        .cf:after {
            clear: both;
        }
        
        .cf {
            *zoom: 1;
        }
        /* Main level */
        
        .menu {
            margin: 50px auto;
            width: 800px;
            width: -moz-fit-content;
            width: -webkit-fit-content;
            width: fit-content;
        }
        
        .menu>li {
            background: #34495e;
            float: left;
            position: relative;
            transform: skewX(25deg);
        }
        
        .menu a {
            display: block;
            text-align: center;
            color: #fff;
            text-transform: uppercase;
            text-decoration: none;
            font-family: Arial, Helvetica;
            font-size: 14px;
        }
        
        .menu li:hover {
            background: #e74c3c;
        }
        
        .menu>li>a {
            transform: skewX(-25deg);
            padding: 1em 2em;
        }
        /* Dropdown */
        
        .submenu {
            position: absolute;
            width: 200px;
            left: 50%;
            margin-left: -100px;
            transform: skewX(-25deg);
            transform-origin: left top;
        }
        
        .submenu li {
            background-color: #34495e;
            position: relative;
            overflow: hidden;
        }
        
        .submenu>li>a {
            padding: 1em 2em;
        }
        
        .submenu>li::after {
            content: '';
            position: absolute;
            top: -125%;
            height: 100%;
            width: 100%;
            box-shadow: 0 0 50px rgba(0, 0, 0, .9);
        }
        /* Odd stuff */
        
        .submenu>li:nth-child(odd) {
            transform: skewX(-25deg) translateX(0);
        }
        
        .submenu>li:nth-child(odd)>a {
            transform: skewX(25deg);
        }
        
        .submenu>li:nth-child(odd)::after {
            right: -50%;
            transform: skewX(-25deg) rotate(3deg);
        }
        /* Even stuff */
        
        .submenu>li:nth-child(even) {
            transform: skewX(25deg) translateX(0);
        }
        
        .submenu>li:nth-child(even)>a {
            transform: skewX(-25deg);
        }
        
        .submenu>li:nth-child(even)::after {
            left: -50%;
            transform: skewX(25deg) rotate(3deg);
        }
        /* Show dropdown */
        
        .submenu,
        .submenu li {
            opacity: 0;
            visibility: hidden;
        }
        
        .submenu li {
            transition: .2s ease transform;
        }
        
        .menu>li:hover .submenu,
        .menu>li:hover .submenu li {
            opacity: 1;
            visibility: visible;
        }
        
        .menu>li:hover .submenu li:nth-child(even) {
            transform: skewX(25deg) translateX(15px);
        }
        
        .menu>li:hover .submenu li:nth-child(odd) {
            transform: skewX(-25deg) translateX(-15px);
        }

---

笔没墨了!!!
欲知后事如何，请听下回分解 !!!