CSS 3实现酷炫导航_html/css_WEB-ITnose-html教程-PHP中文网

CSS 3实现酷炫导航_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 09:13:37

原创

1102人浏览过

上面是一个效果图，代码在下面：
html

<html><head>    <meta charset="utf-8"/>    <title>CSS3 实现的导航</title>    <link type="text/css" rel="stylesheet" href="nav.css" />    <base target="_blank" href="http://www.ido321.com"></base></head><body>    <nav>        <ul class="nav-ul">            <li>                <a href="/">首页</a>            </li>            <li>                <a href="/category/frontend">Web前端</a>                <ul>                    <li  class="nav-effect-1">                        <a href="/category/frontend/javascript">JavaScript</a>                    </li>                    <li  class="nav-effect-2">                        <a href="/category/frontend/jq">JQuery</a>                    </li>                       <li  class="nav-effect-3">                        <a href="/category/frontend/style">CSS</a>                    </li>                       <li  class="nav-effect-4">                        <a href="/category/frontend/html">HTML</a>                    </li>                       </ul>            </li>            <li>                <a href="/category/end">后端</a>                <ul>                    <li  class="nav-effect-1">                        <a href="/category/end/python-end">Python</a>                    </li>                    <li  class="nav-effect-2">                        <a href="category/end/php">PHP</a>                    </li>                       </ul>            </li>            <li>                <a href="/category/trivial">琐碎杂类</a>                <ul>                    <li  class="nav-effect-1">                        <a href="/category/trivial/linux">Linux</a>                    </li>                    <li  class="nav-effect-2">                        <a href="/category/trivial/ajax">Ajax</a>                    </li>                       </ul>            </li>            <li>                <a href="/category/life">我的生活</a>                <ul>                    <li  class="nav-effect-1">                        <a href="/category/life/college">College</a>                    </li>                    <li  class="nav-effect-2">                        <a href="/category/life/review">Review</a>                    </li>                       <li  class="nav-effect-3">                        <a href="/category/life/sentiment">Sentiment</a>                    </li>                   </ul>            </li>            <li>                <a href="#">关于我</a>                <ul>                    <li  class="nav-effect-1">                        <a href="/contribute">友情链接</a>                    </li>                    <li  class="nav-effect-2">                        <a href="/message">留言板</a>                    </li>                       </ul>            </li>        </ul>    </nav></body></html>

登录后复制

css

*{    margin:0 auto;}body{    background-color: #EEEEEE;    font-family: Microsoft Yahei,Arial,sans-serif;}nav{    width: 100%;    background-color: #455552;    position: relative;    width: 650px;    margin-top: 100px;}.nav-ul{    list-style: none;}.nav-ul>li{    display: inline-block;    position: relative;}.nav-ul a{    text-decoration: none;    color: #FFF;    display: inline-block;    padding: 10px 20px;}.nav-ul a:hover{    background-color: #1ABC9C;}.nav-ul a:hover+ul li{    opacity:1;    -webkit-transform: rotateY(0deg);    transform: rotateY(0deg);}.nav-ul a+ul{    list-style: none;    position: absolute;    transition: opacity 0.5s;     -webkit-perspective: 800;      -webkit-transform-style: preserve-3d;}.nav-ul a+ul:hover li{    opacity: 1;    -webkit-transform: rotateY(0deg);    transform: rotateY(0deg);}.nav-ul a+ul li{    position: relative;     left: -40px;    opacity: 0;    width: 150px;    transition: transform 1.5s,opacity 0.8s;}.nav-ul a+ul a{    display: inline-block;    width: 75%;    background-color: rgba(26,188, 156, 0.75);}.nav-effect-1{    transform: rotateY(90deg) translateX(10px);}.nav-effect-2{    transform: rotateY(120deg) translateX(20px);}.nav-effect-3{    transform: rotateY(150deg) translateX(30px);}.nav-effect-4{    transform: rotateY(180deg) translateX(40px);}.nav-ul a+ul a:hover{    background-color: rgba(69,85, 82, 0.75);}

登录后复制

查看demo：demo