你的位置:首页 > 网页设计

[网页设计]倒计时5,4,3,2,1css实现(count down from 5 to 1 using css)

0
//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>
0
您可能感兴趣的文章