倒計時5，4，3，2，1css實現(count down from 5 to 1 using css)
阿新 • • 發佈：2018-10-28
The flow mes hid useful code con hidden init
//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>
</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>
倒計時5，4，3，2，1css實現(count down from 5 to 1 using css)