纯css无缝滚动 - 快车库

原理：

复制一份需要无缝滚动的区域

<div class="page">
    <ul class="box item1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <ul class="box item2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

animation css3动画

/*核心css*/
@keyframes moveup{
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}
.box { animation: moveup 10s  linear infinite; }
.page { overflow: hidden; }

/*样式*/
.page { margin-top: 200px; height: 100px; border-top: 2px solid lightblue; border-bottom: 2px solid red; }
.box {margin: 0;}
.box li{ line-height: 30px; }

浏览器支持(需加css前缀)：IE10+ Chrome FF android2.3+ safair5.1+