<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .wrap{ width: 500px; height: 100px; box-shadow: 0 0 120px #333; overflow: hidden; margin: 50px auto; cursor: pointer; position: relative; } .list{ width: 200%; height: 100px; position: absolute; top: 0; left: 0; overflow: hidden; } .list li{ list-style-type: none; float: left; margin: 10px; width: 74px; height: 74px; line-height: 74px; color: #414141; text-align: center; font-size: 52px; text-shadow: 1px 1px 0px rgba(255,255,255,.55); border: 1px solid #333; padding: 2px; background-color: orange; } @-webkit-keyframes move{ from{ left: 0; /*这里使用translate移动时，hover暂停时会有回弹，原因不详*/ /*-webkit-transform:translate3d(0,0,0);*/ } to{ left: -500px; /*-webkit-transform:translate3d(-500px,0,0);*/ } } .animate{ -webkit-animation:move 5s linear infinite; } .wrap:hover .animate{ -webkit-animation-play-state: paused; } </style> </head> <body> <div class="wrap"> <ul class="list animate"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>