css導航欄制作方法

大家知道css導航欄制作?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。

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

}

相信大家已經了解css導航欄制作了吧!感謝大家對我們網站的支持!

相關推薦：

CSS3@media的實際使用介紹 

CSSRGB顏色的使用方法