<style> @keyframes swiper { 0%{transform: translateX(0);} 28%{transform: translateX(0);} 33%{transform: translateX(-300px);} 61%{transform: translateX(-300px);} 66%{transform: translateX(-600px);} 95%{transform: translateX(-600px);} 100%{transform: translateX(-900px);} } #box{width: 300px; height: 200px; border: 2px solid; overflow: hidden; } #box>div>div{ width: 300px; height: 200px; font-size: 50px; text-align: center; line-height: 200px; float: left; } #box>div{ width: 9999px; height: 200px; animation: swiper 10s linear infinite; } </style> </head> <body> <div id="box"> <div> <div style="background: lightblue;">1</div> <div style="background: lightpink;">2</div> <div style="background: lightgoldenrodyellow">3</div> <div style="background: lightblue;">1</div> </div> </div> </body> </html>
标签：translateX,轮播,效果,transform,300px,height,width,200px From： https://www.cnblogs.com/tw22419/p/17515876.html