CSS是一種用于網(wǎng)頁設(shè)計的語言，通過設(shè)置樣式可以實現(xiàn)豐富的頁面效果，其中導(dǎo)航切換效果應(yīng)用廣泛。下面介紹一些常用的導(dǎo)航切換效果代碼，便于大家參考。

/* 基礎(chǔ)樣式 */
.nav{
list-style:none;
display:flex;
justify-content:center;
margin:0;
padding:0;
}
.nav li{
margin-right:20px;
}
.nav a{
display:inline-block;
padding:10px 20px;
background:#eee;
color:#333;
text-decoration:none;
transition:all 0.3s ease;
}
.nav a:hover{
background:#333;
color:#fff;
}
/* 選中狀態(tài) */
.nav a.active{
background:#333;
color:#fff;
}
/* 下劃線效果 */
.nav a:after{
content:'';
display:block;
height:2px;
width:0;
background:#333;
transition:width 0.3s ease;
}
.nav a:hover:after,
.nav a.active:after{
width:100%;
}
/* 邊框效果 */
.nav a{
position:relative;
}
.nav a:before{
content:'';
position:absolute;
bottom:0;
left:0;
height:0;
width:100%;
border-bottom:2px solid #333;
transition:height 0.3s ease;
}
.nav a:hover:before,
.nav a.active:before{
height:100%;
}
/* 滑動效果 */
.nav a{
position:relative;
overflow:hidden;
}
.nav a:after{
content:'';
position:absolute;
bottom:0;
left:0;
height:100%;
width:0;
background:#333;
transition:width 0.3s ease;
}
.nav a:hover:after,
.nav a.active:after{
width:100%;
}
/* 淡入淡出效果 */
.nav a{
position:relative;
z-index:1;
}
.nav a:before{
content:'';
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:#333;
z-index:-1;
opacity:0;
transition:opacity 0.3s ease;
}
.nav a:hover:before,
.nav a.active:before{
opacity:1;
}