本文将介绍通过强大的CSS中的animation来实现无缝滚动动画，思路来源于JS的动画方式。
1.给要使用动画的元素添加animation属性，并设置相关参数和动画方案@keyframes。
2.相同的某个元素复制2份。
3.动画逻辑是：2个相同的元素，父容器的宽度是1680px，当第1个元素向左偏移840px完成后，瞬间复原位置，利用视觉差来实现无缝滚动的效果。
上干货（上代码）：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>前端哥——纯css无缝滚动代码</title> <style> * { box-sizing: border-box;} HTML,body { width: 100%;height: 100%;margin: 0px 0px;padding: 0px 0px;} .box1-wrapper { width: 840px; height: 200px; margin: 50px auto 0; overflow: hidden; background-color: darkgray; } .box1 { width: 1680px; height: 200px; overflow: hidden; background-color: darkgoldenrod; font-size: 0; } .box1:hover .img-list { animation-play-state: paused; -webkit-animation-play-state: paused; } .img-list { display: inline-block; width: 840px; height: 200px; overflow: hidden; font-size: 0; background-color: coral; animation: imagesLoop 10s linear 1s infinite normal; } .img-item { display: inline-block; width: 200px; height: 200px; margin-right: 10px; /* background-image: url('qcx.png'); */ background-size: 100%; background-repeat: no-repeat; background-color: darkcyan; font-size: 20px; text-align: center; line-height: 200px; cursor: pointer; color: red; } @keyframes imagesLoop { 0% { transform: translateX(0px); } 100% { transform: translateX(-840px); } } </style> </head> <body> <div class="box1-wrapper"> <div class="box1"> <ul class="img-list"> <li class="img-item">1</li> <li class="img-item">2</li> <li class="img-item">3</li> <li class="img-item">4</li> </ul> <ul class="img-list"> <li class="img-item">1</li> <li class="img-item">2</li> <li class="img-item">3</li> <li class="img-item">4</li> </ul> </div> </div> </body></html>