CSS 让数字滑动显示
生活随笔
收集整理的這篇文章主要介紹了
CSS 让数字滑动显示
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
最近在做一個數(shù)據(jù)展示的頁面，老板想要的效果是數(shù)字滑動的顯示。
所以想了一下實現(xiàn)了老板想要的效果。代碼如下。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>number</title><style>*, html, body {margin: 0px;padding: 0px;}.o-div {width: 500px;margin: 100px;}h2 {height: 40px;background-color: #f5f5f5;position: relative;}span {width: 25px;display: inline-block;height: 40px;overflow: hidden;position: relative;}span:before {content: '0123456789';display: block;width: 25px;line-height: 40px;top: 0px;word-break: break-all;position: absolute;display: block;}span.num-2:before {transition: top 1.2s ease-in;top: -80px;}span.num-6:before {transition: top 1.2s ease-in;top: -240px;}</style> </head> <body><div class="o-div"><h2><span id="n1" class="num"></span><span id="n2" class="num"></span></h2></div><script>var oS1 = document.getElementById('n1');var oS2 = document.getElementById('n2');setTimeout(function () {oS1.className = oS1.className + ' num-2';oS2.className = oS2.className + ' num-6';}, 1000)</script> </body> </html>相信大家也都看得懂。總結(jié)
以上是生活随笔為你收集整理的CSS 让数字滑动显示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 图机器学习中的数据增强技术
- 下一篇： CSS文字或元素的水平垂直居中多种方式（