CSS3的一個簡單導航欄實現的方法

歡迎大家在這裡學習CSS3的一個簡單導航欄實現!這裡是我們給大家整理出來的精彩內容。我相信，這些問題也肯定是很多朋友在關心的，所以我就給大家談談這個!

CSS Code復制內容到剪貼板

*{

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);

}

好了，CSS3的一個簡單導航欄實現內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!

相關推薦：

使用CSS3實現選項卡切換的方法介紹