<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>document</title> <style> * { margin: 0px; padding: 0px; } body { background: rgba(0, 0, 0, .6); } .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>

