动态轮播

参考资料：https://juejin.cn/post/7157419778678718495

<template>
    <p>这是用户管理页面11</p>
    <div id="container" style="width:100px; height:100px; overflow: hidden; "> <!--  overflow: hidden; -->
        <div style="display: flex; animation: discolor3 5s linear infinite;">
            <div
                style="width:100px; height:100px; flex-shrink: 0; font-size: 32px; line-height: 100px; text-align: center; background:#FF614C;">
                1</div>
            <div
                style="width:100px; height:100px; flex-shrink: 0; font-size: 32px; line-height: 100px; text-align: center; background:#BFDC36;">
                2</div>
            <div
                style="width:100px; height:100px; flex-shrink: 0; font-size: 32px; line-height: 100px; text-align: center; background:#6E80E6;">
                3</div>
            <div
                style="width:100px; height:100px; flex-shrink: 0; font-size: 32px; line-height: 100px; text-align: center; background:#FF614C;">
                1</div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
#container {
    margin-left: 20px;
    margin-top: 20px;
}
</style>

<style>
@keyframes discolor3 {
    0% {
        transform: translateX(0px);
    }

    16.5% {
        transform: translateX(-100px);
    }

    33% {
        transform: translateX(-100px);
    }

    49.5% {
        transform: translateX(-200px);
    }

    66% {
        transform: translateX(-200px);
    }

    82.5% {
        transform: translateX(-300px);
    }

    100% {
        transform: translateX(-300px);
    }
}
</style>