純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+