数字翻牌效果实现(tansform transtion)

最新推荐文章于 2023-07-26 23:14:43 发布

vagabond_

最新推荐文章于 2023-07-26 23:14:43 发布

阅读量1.2k

点赞数

分类专栏： css vue 文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/vagabond_/article/details/121849521

版权

css 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

#Vue实现数字翻牌效果 (tansform)
效果图
在这里插入图片描述
思路
每个位数先用0-9占位，位数上的数值大小通过translateY调整显示，利用transition实现动画效果

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>数字翻牌</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .num-contain {
            display: flex;
            justify-content: space-between;
            width: 220px;
            height: 60px;

        }

        .num-item {
            width: 39px;
            height: 60px;
            font-size: 60px;
            line-height: 60px;
            color: #ffffff;
            text-align: center;
            overflow: hidden;
            font-weight: 700;
            background: url('./warn-num.png');

        }

        ul {
            margin: 0;
            list-style: none;
            padding: 0;
            transition: all 2s ease-in-out;
        }

        li {
            color: #ffffff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="num-contain">
            <div v-for="(item, index) in numList" :key="index" class="num-item">
                <ul :style="`transform: translateY(${-60 * item }px)`">
                    <li v-for="(num, idx) in 10" :key="idx">{{ idx }}</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    numList: '00000'
                }
            },
            mounted() {
                setInterval(() => {
                    this.numList = ''
                    for (let i = 0; i < 5; i++) {
                        this.numList += `${Math.floor((Math.random() * 10))}`;
                    }
                }, 4000)
            },
            methods: {

            },
        })
    </script>
</body>

</html>

vagabond_

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
数字翻牌效果实现(tansform transtion)

数字翻牌效果实现(tansform)效果图思路每个位数先用0-9占位，位数上的数值大小通过translateY调整显示，利用transition实现动画效果代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>数字翻牌</title> <script src="https://cdn.jsdelivr.net/npm/vue
复制链接

扫一扫

专栏目录