uni-app 之 图片匀速滑动轮播，animation动画

uni-app 之 图片匀速滑动轮播，animation动画

<template>
    <view>

        <!-- 图片匀速滑动轮播 -->
        <div class="all-checker">
            <div style="padding-top: 20px;">
                <label>加个标题，嘎嘎嘎</label>
            </div>

            <div class="container">
                <div class="slider">
                    <img src="static/imgBgmm.jpg" alt="">
                    <img src="static/imgBgmm.jpg" alt="">
                </div>
            </div>
        </div>

    </view>
</template>


<script>
    export default {
        data() {
            return {

            }
        },
    }
</script>


<style lang="scss">
    /**
    * 图片滚动
    */
    .container {
        width: 100%;
        height: 260px;
        /* 图片高度 */
        overflow: hidden;
    }

    .slider {
        width: 200%;
        /* 图片总宽度的两倍 */
        height: 100%;
        display: flex;
        animation: scroll 10s linear infinite;
        /* 设置动画 */
    }

    .slider img {
        width: 50%;
        /* 单个图片的宽度 */
        height: 100%;
        object-fit: cover;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
            /* 每次滚动一个图片的宽度 */
        }
    }

    /**
    * 案例图片滚动
    */
    #container {
        /*  width: 400px;
            height: 300px;
            overflow: hidden; 
        */
        width: 96%;
        margin: 3% 10px;
        overflow: hidden;
    }
</style>