當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS 让数字滑动显示

發布時間：2025/3/12 CSS 17 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS 让数字滑动显示小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近在做一個數據展示的頁面，老板想要的效果是數字滑動的顯示。

所以想了一下實現了老板想要的效果。代碼如下。

<!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>相信大家也都看得懂。

總結

以上是生活随笔為你收集整理的CSS 让数字滑动显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

数字
css