倒计时5，4，3，2，1css实现(count down from 5 to 1 using css)

时间：2018-10-28 11:11:14 阅读：210 评论：0 收藏：0 [点我收藏+]

标签：using margin -o code from html infinite contain key

//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>

</body>

</html>

倒计时5，4，3，2，1css实现(count down from 5 to 1 using css)

标签：using margin -o code from html infinite contain key

原文地址：https://www.cnblogs.com/begin256/p/9864550.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行