//count down from 5 to 1, a useful animation. show the code to you: <!DOCTYPE html> <html> <style> #contain { width: 400px; height: 300px; overflow: h ...
//count down from 5 to 1, a useful animation. show the code to you: <!DOCTYPE html> <html> <style> #contain { width: 400px; height: 300px; overflow: hidden; } #pic { height: 1200px; animation: switch 5s ease-out infinite; } #pic > img { float: top; width: 400px; height: 300px; } @keyframes switch { 0%, 20% { margin-top: 0; } 20%, 40% { margin-top: -300px; } 40%, 60% { margin-top: -600px; } 60%, 80% { margin-top: -900px; } 80%, 100% { margin-top: -1200px; } }
</style> <body> <div id="contain"> <div id="pic"> <img src="5.png" /> <img src="4.png" /> <img src="3.png" /> <img src="2.png" /> <img src="1.png" /> </div> </div> </body> </html>
