//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>
经验首页