css3做无限滚动

CSS3有很多强大的功能，其中无限滚动效果也是其之一。下面我们来了解一下CSS3如何实现无限滚动。

.scroll{
animation: moveleft 5s linear infinite;
}
@keyframes moveleft{
to {transform: translateX(-100%);}
}

上述代码使用了CSS3的动画（animation）特效，定义了一个名叫moveleft的动画效果，通过transform属性的translateX方法实现元素向左移动，同时滚动的总时间为5秒并且重复进行，达到了一种无限滚动的效果。

我们可以将这个动画效果应用于一个滚动框架（scroll）上，如下所示：

<div class="scroll">
<p>我是第一行</p>
<p>我是第二行</p>
<p>我是第三行</p>
<p>我是第四行</p>
</div>

通过这种方式，像上述代码一样加入多个p标签，就可以实现无限循环滚动的效果了！

需要注意的是，在使用CSS3动画过程中，不要忘记使用浏览器前缀，保证达到最佳的兼容性。

以上就是利用CSS3实现无限循环滚动的基本方式，希望对大家有所帮助。

查看更多关于css3做无限滚动的详细内容...