CSS是前端開發(fā)中的重要技術(shù)之一，它可以幫助我們實(shí)現(xiàn)頁(yè)面美觀的效果。實(shí)現(xiàn)的效果之一是滑動(dòng)導(dǎo)航，接下來(lái)我將為大家介紹CSS如何實(shí)現(xiàn)滑動(dòng)導(dǎo)航。

.nav{
display: flex; 
justify-content: space-between; 
margin-bottom: 40px;
}
.nav ul{
list-style: none; 
margin: 0;
padding: 0;
display: flex;
}
.nav li{
padding: 0 10px;
}
.nav li:hover{
color: #f60;
cursor: pointer;
}
.line{
position: absolute; 
bottom: 0;
left: 0;
height: 2px;
background-color: #f60;
transition: all .3s ease-out;
}

以上是CSS實(shí)現(xiàn)滑動(dòng)導(dǎo)航的主要代碼。接下來(lái)解釋一下代碼中的各個(gè)部分。

首先是.nav樣式，使用flex布局將菜單項(xiàng)居中并與logo距離一定距離。接著是li:hover樣式，當(dāng)鼠標(biāo)懸浮在菜單項(xiàng)上時(shí)會(huì)觸發(fā)，字體顏色變?yōu)?f60。最后是.line樣式，這是滑動(dòng)條的樣式，使用絕對(duì)定位將其固定在底部，寬度與li的寬度一致。

接著，在HTML中加入以下代碼：

<nav class="nav">
<ul>
<li>首頁(yè)</li>
<li>產(chǎn)品介紹</li>
<li>關(guān)于我們</li>
<li>聯(lián)系我們</li>
</ul>
<div class="line"></div>
</nav>

以上是HTML代碼，其中nav元素的class為nav，里面包含一個(gè)ul元素和一個(gè)div元素。其中ul元素表示菜單項(xiàng)，div元素表示滑動(dòng)條。

接下來(lái)，我們需要使用JavaScript來(lái)感知用戶的鼠標(biāo)移動(dòng)事件，并且將滑動(dòng)條位置做相應(yīng)的調(diào)整。

let nav = document.querySelector('.nav');
let line = document.querySelector('.line');
let lis = document.querySelectorAll('.nav li');
let lineWidth = lis[0].offsetWidth;
let lastIndex = 0;
nav.onmouseover = function(e) {
let target = e.target;
if (target.nodeName !== 'LI') return;
let index = [...lis].indexOf(target);
if (index === lastIndex) return;
line.style.width = lineWidth + 'px';
line.style.transform =translateX(${index * lineWidth}px);
lastIndex = index;
}
nav.onmouseleave = function() {
line.style.width = 0;
line.style.transform = 'translateX(0)';
lastIndex = 0;
}

以上是JavaScript代碼，實(shí)現(xiàn)的主要功能是監(jiān)聽鼠標(biāo)移動(dòng)事件，移動(dòng)滑動(dòng)條的位置。當(dāng)鼠標(biāo)移進(jìn).nav元素時(shí)，判斷鼠標(biāo)經(jīng)過(guò)的元素節(jié)點(diǎn)是否為li節(jié)點(diǎn)，如果是則計(jì)算該節(jié)點(diǎn)的位置，并移動(dòng)滑動(dòng)條的位置。當(dāng)鼠標(biāo)移出.nav元素時(shí)，重置滑動(dòng)條的位置和長(zhǎng)度。

以上就是CSS實(shí)現(xiàn)滑動(dòng)導(dǎo)航的詳細(xì)介紹，希望對(duì)大家能有所幫助。