CSS3中如何实现倒计时效果
小编给大家分享一下CSS3中如何实现倒计时效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联公司:2013年至今为各行业开拓出企业自己的“网站建设”服务,为近千家公司企业提供了专业的做网站、网站设计、网页设计和网站推广服务, 专业公司由设计师亲自精心设计,设计的效果完全按照客户的要求,并适当的提出合理的建议,拥有的视觉效果,策划师分析客户的同行竞争对手,根据客户的实际情况给出合理的网站构架,制作客户同行业具有领先地位的。
实现效果
实现代码
html
0 5 4 3 2 1 00 9 8 7 6 5 4 3 2 1 00 5 4 3 2 1 00 9 8 7 6 5 4 3 2 1 00 9 8 7 6 5 4 3 2 1 00 9 8 7 6 5 4 3 2 1 0
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中如何实现倒计时效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
分享题目:CSS3中如何实现倒计时效果
网站URL:http://myzitong.com/article/gsgogj.html