数字效果 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>numCounter</title> <style type="text/css"> .numCounter { display: inline-block; height: 70px; line-height: 70px; color: #F1F1F1; text-shadow: 0 0 2px #fff; font-weight: bold; white-space: normal; font-size: 46.66667px; } .numCounter > b { display: inline-block; width: 50px; height: 100%; margin: 0 0.1em; border-radius: 8px; background: #191919; text-align: center; box-shadow: 1px 1px rgba(255, 255, 255, 0.05), 1px 1px 5px #111 inset; overflow: hidden; } .numCounter > b:before { content: ' 0 1 2 3 4 5 6 7 8 9 '; display: block; word-break: break-all; word-break: break-word; -webkit-transition: 0.4s cubic-bezier(0.12, 0.78, 0.52, 1.2); transition: 0.4s cubic-bezier(0.12, 0.78, 0.52, 1.2); } .numCounter > b.d1:before { margin-top: -70px; } .numCounter > b.d2:before { margin-top: -140px; } .numCounter > b.d3:before { margin-top: -210px; } .numCounter > b.d4:before { margin-top: -280px; } .numCounter > b.d5:before { margin-top: -350px; } .numCounter > b.d6:before { margin-top: -420px; } .numCounter > b.d7:before { margin-top: -490px; } .numCounter > b.d8:before { margin-top: -560px; } .numCounter > b.d9:before { margin-top: -630px; } .numCounter > span { display: inline-block; font-size: 1.1em; opacity: 0.4; line-height: 1.8; padding: 0; vertical-align: top; text-shadow: none; } html, body { height: 100%; } body { background-color: #222; background: -webkit-linear-gradient(top, #191919 50%, #333 100%); background: linear-gradient(to bottom, #191919 50%, #333 100%); font-family: Helvetica, Arial; -webkit-perspective: 1000px; perspective: 1000px; } .numCounter { overflow: hidden; position: absolute; width: 480px; height: 70px; margin: auto; left: 0; top: 0; right: 0; bottom: 0; padding: 0.5em .1em; text-align: center; background: #222; background: -webkit-linear-gradient(top, #555 1%, #333 4%, #1a1a1a 98%, #000 100%); background: linear-gradient(to bottom, #555 1%, #333 4%, #1a1a1a 98%, #000 100%); border-radius: 12px; box-shadow: 0 5px 12px #111, 0 0 8px 0 rgba(255, 255, 255, 0.1) inset; } .numCounter:before { content: ''; position: absolute; left: -10%; right: -10%; top: -50%; bottom: 50%; background: #FFF; opacity: 0.04; z-index: 1; -webkit-transform: rotatez(-5deg); transform: rotatez(-5deg); } </style> </head> <body> <div data-value="1839471" class="numCounter"><b></b><span>,</span><b></b><b></b><b></b><span>,</span><b></b><b></b><b></b></div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> function Counter(selector){ this.el = $(selector); this.numbers = this.el.find('> b').toArray().reverse(); } Counter.prototype.count = function(newVal){ var reversedArr, className; // update instance's value this.value = newVal || this.el.attr('data-value')|0; if( !this.value ) return; // convert value into an array of numbers reversedArr = (this.value+'').split('').reverse(); // loop on each number element and change it this.numbers.forEach(function(item, i){ setTimeout(function(){ className = 'd' + reversedArr[i] || 0; //if( item.className != className) item.className = className; }, i * 250); }) } /////////////// create new counter for this demo /////////////////////// var counter = new Counter('.numCounter'); randomCount(); function randomCount(){ counter.count( randomNum(50,9999999) ); setTimeout(randomCount,4000); } function randomNum(min,max){ return Math.floor(Math.random()*(max-min+1)+min); } </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 数字效果