数字滑动效果

最新推荐文章于 2022-11-29 11:11:49 发布

weixin_41837346

最新推荐文章于 2022-11-29 11:11:49 发布

阅读量142

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_41837346/article/details/103581414

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了数字滑动效果的原理，通过将数字从上到下布局，仅显示视口内的一个元素，并利用CSS的过渡属性（transition）改变top值，实现数字块的平滑滑动效果。

摘要由CSDN通过智能技术生成

原理

数字从上到下布局
只显示一个元素的视口
使用过渡（transition），改变top值，滑动整个块

简易版实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>number</title>
    <style>
        #wrapper {
            height: 20px;
            overflow: hidden;
        }

        .list {
            display: flex;
            flex-direction: column;
            position: relative;
            top: 0;
            transition: top 3s;
        }

        #list span {
            line-height: 20px;
        }

        .scroll-top {
            top: -220px;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div id="list" class="list"></div>
    </div>
    <script>
        var listEle = document.getElementById('list')
        let html = ''
        //数字0-11动画
        for (let i = 0; i < 12; i++) {
            html += `<span>${i}</span>`
        }
        listEle.innerHTML = html
        setTimeout(() => {
            listEle.className += ' scroll-top'
        }, 100)

    </script>
</body>

</html>

weixin_41837346

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数字滑动效果

原理数字从上到下布局只显示一个元素的视口使用过渡（transition），改变top值，滑动整个块简易版实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>number</title> <s...
复制链接

扫一扫

专栏目录