小编给大家分享一下CSS3中如何实现倒计时效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
实现效果
实现代码
html
<div class='wrapper'> <div class='time-part-wrapper'> <div class='time-part minutes tens'> <div class='digit-wrapper'> <span class='digit'>0</span> <span class='digit'>5</span> <span class='digit'>4</span> <span class='digit'>3</span> <span class='digit'>2</span> <span class='digit'>1</span> <span class='digit'>0</span> </div> </div> <div class='time-part minutes ones'> <div class='digit-wrapper'> <span class='digit'>0</span> <span class='digit'>9</span> <span class='digit'>8</span> <span class='digit'>7</span> <span class='digit'>6</span> <span class='digit'>5</span> <span class='digit'>4</span> <span class='digit'>3</span> <span class='digit'>2</span> <span class='digit'>1</span> <span class='digit'>0</span> </div> </div> </div> <div class='time-part-wrapper'> <div class='time-part seconds tens'> <div class='digit-wrapper'> <span class='digit'>0</span> <span class='digit'>5</span> <span class='digit'>4</span> <span class='digit'>3</span> <span class='digit'>2</span> <span class='digit'>1</span> <span class='digit'>0</span> </div> </div> <div class='time-part seconds ones'> <div class='digit-wrapper'> <span class='digit'>0</span> <span class='digit'>9</span> <span class='digit'>8</span> <span class='digit'>7</span> <span class='digit'>6</span> <span class='digit'>5</span> <span class='digit'>4</span> <span class='digit'>3</span> <span class='digit'>2</span> <span class='digit'>1</span> <span class='digit'>0</span> </div> </div> </div> <div class='time-part-wrapper'> <div class='time-part hundredths tens'> <div class='digit-wrapper'> <span class='digit'>0</span> <span class='digit'>9</span> <span class='digit'>8</span> <span class='digit'>7</span> <span class='digit'>6</span> <span class='digit'>5</span> <span class='digit'>4</span> <span class='digit'>3</span> <span class='digit'>2</span> <span class='digit'>1</span> <span class='digit'>0</span> </div> </div> <div class='time-part hundredths ones'> <div class='digit-wrapper'> <span class='digit'>0</span> <span class='digit'>9</span> <span class='digit'>8</span> <span class='digit'>7</span> <span class='digit'>6</span> <span class='digit'>5</span> <span class='digit'>4</span> <span class='digit'>3</span> <span class='digit'>2</span> <span class='digit'>1</span> <span class='digit'>0</span> </div> </div> </div> </div>
css
/* Play with speed and easing of the animation */
/* =========================================== */
.digit {
display: inline-block;
font-size: 200px;
color: rgba(0, 0, 0, 0.25);
height: 180px;
line-height: 1;
}
.time-part-wrapper {
display: inline-block;
margin-right: 50px;
position: relative;
}
.time-part-wrapper:not(:last-child):after {
content: ":";
display: block;
width: 30px;
height: 230px;
position: absolute;
top: 0px;
right: -30px;
color: rgba(0, 0, 0, 0.25);
font-size: 200px;
line-height: 0.9;
}
.time-part {
width: 140px;
text-align: center;
height: 180px;
overflow: hidden;
display: inline-block;
margin-left: -5px;
box-sizing: border-box;
}
.time-part .digit-wrapper {
animation-timing-function: cubic-bezier(1, 0, 1, 0);
}
.time-part.minutes.tens .digit-wrapper {
animation-name: minutes-tens;
animation-duration: 3600s;
animation-iteration-count: 1;
}
.time-part.minutes.ones .digit-wrapper {
animation-name: minutes-ones;
animation-duration: 600s;
animation-iteration-count: 6;
}
.time-part.seconds.tens .digit-wrapper {
animation-name: seconds-tens;
animation-duration: 60s;
animation-iteration-count: 60;
}
.time-part.seconds.ones .digit-wrapper {
animation-name: seconds-ones;
animation-duration: 10s;
animation-iteration-count: 360;
}
.time-part.hundredths.tens .digit-wrapper {
animation-name: hundredths-tens;
animation-duration: 1s;
animation-iteration-count: 3600;
}
.time-part.hundredths.ones .digit-wrapper {
animation-name: hundredths-ones;
animation-duration: 0.1s;
animation-iteration-count: 36000;
}
@keyframes minutes-tens {
0% {
transform: translateY(-180px);
}
16.66667% {
transform: translateY(-360px);
}
33.33333% {
transform: translateY(-540px);
}
50% {
transform: translateY(-720px);
}
66.66667% {
transform: translateY(-900px);
}
83.33333% {
transform: translateY(-1080px);
}
}
@keyframes minutes-ones {
0% {
transform: translateY(-180px);
}
10% {
transform: translateY(-360px);
}
20% {
transform: translateY(-540px);
}
30% {
transform: translateY(-720px);
}
40% {
transform: translateY(-900px);
}
50% {
transform: translateY(-1080px);
}
60% {
transform: translateY(-1260px);
}
70% {
transform: translateY(-1440px);
}
80% {
transform: translateY(-1620px);
}
90% {
transform: translateY(-1800px);
}
}
@keyframes seconds-tens {
0% {
transform: translateY(-180px);
}
16.66667% {
transform: translateY(-360px);
}
33.33333% {
transform: translateY(-540px);
}
50% {
transform: translateY(-720px);
}
66.66667% {
transform: translateY(-900px);
}
83.33333% {
transform: translateY(-1080px);
}
}
@keyframes seconds-ones {
0% {
transform: translateY(-180px);
}
10% {
transform: translateY(-360px);
}
20% {
transform: translateY(-540px);
}
30% {
transform: translateY(-720px);
}
40% {
transform: translateY(-900px);
}
50% {
transform: translateY(-1080px);
}
60% {
transform: translateY(-1260px);
}
70% {
transform: translateY(-1440px);
}
80% {
transform: translateY(-1620px);
}
90% {
transform: translateY(-1800px);
}
}
@keyframes hundredths-tens {
0% {
transform: translateY(-180px);
}
10% {
transform: translateY(-360px);
}
20% {
transform: translateY(-540px);
}
30% {
transform: translateY(-720px);
}
40% {
transform: translateY(-900px);
}
50% {
transform: translateY(-1080px);
}
60% {
transform: translateY(-1260px);
}
70% {
transform: translateY(-1440px);
}
80% {
transform: translateY(-1620px);
}
90% {
transform: translateY(-1800px);
}
}
@keyframes hundredths-ones {
0% {
transform: translateY(-180px);
}
10% {
transform: translateY(-360px);
}
20% {
transform: translateY(-540px);
}
30% {
transform: translateY(-720px);
}
40% {
transform: translateY(-900px);
}
50% {
transform: translateY(-1080px);
}
60% {
transform: translateY(-1260px);
}
70% {
transform: translateY(-1440px);
}
80% {
transform: translateY(-1620px);
}
90% {
transform: translateY(-1800px);
}
}
body {
background: #F1614B;
margin: 0;
font-family: "Aldrich";
}
.wrapper {
margin: 100px auto;
width: 1000px;
position: relative;
}
.wrapper:before, .wrapper:after {
content: "";
display: block;
position: absolute;
width: 100%;
left: 0;
height: 20px;
z-index: 10;
}
.wrapper:before {
top: 0px;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f1614b), color-stop(100%, rgba(241, 97, 75, 0)));
background-image: -moz-linear-gradient(top, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
background-image: -webkit-linear-gradient(top, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
background-image: linear-gradient(to bottom, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
}
.wrapper:after {
bottom: 0px;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMTYxNGIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(241, 97, 75, 0)), color-stop(100%, #f1614b));
background-image: -moz-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
background-image: -webkit-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
background-image: linear-gradient(to bottom, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
}以上是“CSS3中如何实现倒计时效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
