CSS 让数字滑动显示

来源：互联网发布：西北工业大学网络教育编辑：程序博客网时间：2024/05/18 11:28

最近在做一个数据展示的页面，老板想要的效果是数字滑动的显示。

所以想了一下实现了老板想要的效果。代码如下。

<!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>

相信大家也都看得懂。

阅读全文

0 0