无缝滚动：是两组拼在一起的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } div { width: 300px; height: 50px; margin: 200px auto; overflow: hidden; } ul { list-style: none; width: 620px; height: 50px; animation: gun 3s infinite linear; } li { float: left; width: 50px; height: 50px; background-color: rgba(0, 0, 0, 0.6); text-align: center; font: 500 20px/50px "Microsoft YaHei UI"; } @keyframes gun { 0% { transform: translateX(0px); } 100% { transform: translateX(-300px); } } </style> </head> <body> <div> <ul> <li>无</li> <li>缝</li> <li>滚</li> <li>动</li> <li>效</li> <li>果</li> <li>无</li> <li>缝</li> <li>滚</li> <li>动</li> <li>效</li> <li>果</li> </ul> </div> </body> </html>
