css滚动无缝,纯css无缝滚动_html/css_WEB

原理：

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

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

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+