<!DOCTYPE html> <html> <head> <title>Slide Image Sample</title> <style> #container { width: 400px; height: 300px; overflow: hidden; } #photo { width: 1200px; animation: switch 5s ease-out infinite; } #photo > img { float: left; width: 400px; height: 300px; } @keyframes switch { 0%, 25% { margin-left: 0; } 35%, 60% { margin-left: -400px; } 70%, 100% { margin-left: -800px; } } </style> </head> <body> <div id="container"> <div id="photo"> <img src="1.png" /> <img src="2.png" /> <img src="3.png" /> </div> </div> </body> </html>
转自：https://blog.csdn.net/u011848617/article/details/80468463