倒计时结尾使用动画效果代码实例
分类:实例代码
分享一段代码实例,它实现了倒计时效果,并且在倒计时的结尾有动画效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { margin: 0px; padding: 0px; } body { background: rgba(0, 0, 0, .7); } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); font-size: 81px; color: #ddd; font-family: '微软雅黑'; } b { transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; } .test { text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444; animation: test 0.4s linear; -webkit-animation: test 0.4s linear; -moz-animation: test 0.4s linear; -o-animation: test 0.4s linear; } @keyframes test { 0% { font-size: 12px; } 50% { font-size: 576px; } 100% { font-size: 81px; } } </style> </head> <body> <div class="container" align="center"> <b>5</b> </div> <script> var b = document.querySelector('.container b'); var num = b.innerHTML - 1; var action = setInterval(function () { b.innerHTML = num; num--; if (num < 0) { clearInterval(action); b.setAttribute('class', 'test'); } }, 1000); </script> </body> </html>
上面的代码进行了简单演示,代码总体非常简单,更多内容可以参阅相关阅读。
相关阅读:
(1).document.querySelector()可以参阅document.querySelector()一章节。
(2).innerHTML可以参阅innerHTML一章节。
(3).setInterval()可以参阅window.setInterval()一章节。
(4).clearInterval()可以参阅clearInterval()一章节。
(5).setAttribute()可以参阅setAttribute()一章节。
倒计时结尾使用动画效果代码实例,这样的场景在实际项目中还是用的比较多的,关于倒计时结尾使用动画效果代码实例就介绍到这了。
倒计时结尾使用动画效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。