CSS菜單滑動(dòng)效果是一種非常常見且流行的用戶交互效果。它可以使網(wǎng)頁(yè)菜單看起來更加美觀，同時(shí)也可以為用戶提供更加友好的操作體驗(yàn)。

<ul class="menu">
<li><a href="#">菜單項(xiàng)1</a></li>
<li><a href="#">菜單項(xiàng)2</a></li>
<li><a href="#">菜單項(xiàng)3</a></li>
<li><a href="#">菜單項(xiàng)4</a></li>
<li><a href="#">菜單項(xiàng)5</a></li>
</ul>

上面是一個(gè)基本的菜單結(jié)構(gòu)?，F(xiàn)在，我們來添加一個(gè)滑動(dòng)效果。

.menu li{
position:relative;
}
.menu li:before{
content:'';
position:absolute;
top:0;
left:50%;
width:0;
height:2px;
background:#000;
transition:all .3s ease;
}
.menu li:hover:before{
width:100%;
left:0;
}

在這個(gè)例子中，我們給每個(gè)菜單項(xiàng)的前面添加了一個(gè)偽元素，并設(shè)置了一些基本樣式。當(dāng)鼠標(biāo)懸停在一個(gè)菜單項(xiàng)上時(shí)，我們使用CSS3過渡效果來擴(kuò)展偽元素的寬度，從而實(shí)現(xiàn)滑動(dòng)效果。

通過這種方式可以為網(wǎng)頁(yè)增加更加生動(dòng)的效果。實(shí)現(xiàn)起來非常簡(jiǎn)單，但是可以大大提高網(wǎng)頁(yè)的用戶體驗(yàn)。