css3列表滑动效果 |好用的前台 css 框架

<ul class="list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
.list li {
height: 30px;
line-height: 30px;
border-bottom: 1px solid #ccc;
transition: transform 0.3s;
}
.list li:hover {
transform: translateX(10px);
}

首先，大家需要一个列表，可以使用<ul>和<li>标签。为了让效果更加明显，大家设置每个列表项的高度、行高和底部边框。

接着，通过设置transition属性为transform 0.3s，所有列表项在移动时都会有0.3秒的过渡时间，让滑动效果更加平滑。

最后，在:hover伪类中设置transform: translateX(10px);，表示鼠标悬浮在列表项上时，会向右平移10像素。这里使用了CSS3中的transform属性，translateX可以将元素水平移动指定的像素数。

这样，大家就完成了列表滑动效果的实现。代码虽然简单，但是效果却非常好看。如果你还没有使用过CSS3的动画效果，可以尝试一下，一定会让你的页面更加生动有趣。