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>

相信大家也都看得懂。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/553616.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！