怎样用CSS3写一个倒计时成效?
发布时间:2022-04-18 13:32:41 所属栏目:语言 来源:互联网
导读:怎样用CSS3写一个倒计时效果?现在很多网站都会使用倒计时效果,尤其是电子商务网站,常能看到秒杀倒计时,抢购倒计时等等,那么倒计时效果要怎么实现呢?这篇文章就给大家分享如何实现一个简单倒计时效果的实例,感兴趣的朋友可以看一下。 实现代码 html di
怎样用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> /* 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; (编辑:开发网_开封站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
站长推荐
热点阅读