CSS3实现酷炫导航


上面是一个效果图,代码在下面:
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">JavaScripta>
                    li>
                    <li  class="nav-effect-2">
                        <a href="/category/frontend/jq">JQuerya>
                    li>   
                    <li  class="nav-effect-3">
                        <a href="/category/frontend/style">CSSa>
                    li>   
                    <li  class="nav-effect-4">
                        <a href="/category/frontend/html">HTMLa>
                    li>       
                ul>
            li>
            <li>
                <a href="/category/end">后端a>
                <ul>
                    <li  class="nav-effect-1">
                        <a href="/category/end/python-end">Pythona>
                    li>
                    <li  class="nav-effect-2">
                        <a href="category/end/php">PHPa>
                    li>       
                ul>
            li>
            <li>
                <a href="/category/trivial">琐碎杂类a>
                <ul>
                    <li  class="nav-effect-1">
                        <a href="/category/trivial/linux">Linuxa>
                    li>
                    <li  class="nav-effect-2">
                        <a href="/category/trivial/ajax">Ajaxa>
                    li>       
                ul>
            li>
            <li>
                <a href="/category/life">我的生活a>
                <ul>
                    <li  class="nav-effect-1">
                        <a href="/category/life/college">Collegea>
                    li>
                    <li  class="nav-effect-2">
                        <a href="/category/life/review">Reviewa>
                    li>   
                    <li  class="nav-effect-3">
                        <a href="/category/life/sentiment">Sentimenta>
                    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

原文出处:http://www.ido321.com/1547.html

你可能感兴趣的:(CSS,css,css3)