css实现一个三排数组滚动抽奖

简单理解可视化版本：

<div class="slot-machine">
        <div class="reel">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
            <!-- ... 其他项目 ... -->
        </div>
        <div class="reel">
            <div>Item 4</div>
            <div>Item 5</div>
            <div>Item 6</div>
            <div>Item 4</div>
            <div>Item 5</div>
            <div>Item 6</div>
            <!-- ... 其他项目 ... -->
        </div>
        <div class="reel">
            <div>Item 7</div>
            <div>Item 8</div>
            <div>Item 9</div>
            <div>Item 7</div>
            <div>Item 8</div>
            <div>Item 9</div>
            <!-- ... 其他项目 ... -->
        </div>
    </div>

.slot-machine {
        // margin-top: 200px;
        display: flex;
        overflow: hidden;
        height: 50px;
    }

    .reel {
        animation-name: spin;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        // transform-origin: linear;
        div {
            height: 40px;
        }
    }

    @keyframes spin {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-120px);
        }
    }

公司前端负责人大佬写的，优雅：

<View class="lucky-box" :class="{ 'active-scroll': state.activeScroll }">
            <View class="box-item" v-for="item in 3" :key="item">
                <View class="ul" :style="{ transform: `translateY(-${state.prizeStatus}%)` }">
                    <View class="li">
                        <Image class="prize-img" :src="require('./assets/prize-init.png')"></Image>
                    </View>
                    <View class="li">
                        <Image class="prize-img" :src="require('./assets/prize-5.png')"></Image>
                    </View>
                    <View class="li">
                        <Image class="prize-img" :src="require('./assets/prize-0.png')"></Image>
                    </View>
                    <View class="li">
                        <Image class="prize-img" :src="require('./assets/prize-10.png')"></Image>
                    </View>
                    <View class="li">
                        <Image class="prize-img" :src="require('./assets/prize-100.png')"></Image>
                    </View>
                    <View class="li">
                        <Image class="prize-img" :src="require('./assets/prize-5.png')"></Image>
                    </View>
                    <View class="li">
                        <Image class="prize-img" :src="require('./assets/prize-0.png')"></Image>
                    </View>
                    <View class="li">
                        <Image class="prize-img" :src="require('./assets/prize-10.png')"></Image>
                    </View>
                </View>
            </View>
        </View>

```vue
.lucky-box {
            top: 52.5%;
            left: 50%;
            transform: translateX(-50.2%);
            position: absolute;
            height: 5.9%;
            width: 51%;
            display: flex;
            align-items: center;
            pointer-events: none;
            // background-color: rgba(81, 0, 255, 0.605);
            .box-item {
                flex: 1;
                height: 100%;
                overflow: hidden;
                .ul {
                    position: relative;
                }

                .li {
                    height: 150px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .prize-img {
                        width: 87px;
                        height: 88px;
                    }
                }
            }
        }

        .active-scroll {
            :nth-child(1) {
                .ul {
                    -webkit-animation: anim1 0.5s linear infinite;
                }
            }
            :nth-child(2) {
                .ul {
                    -webkit-animation: anim2 0.5s linear infinite;
                }
            }
            :nth-child(3) {
                .ul {
                    -webkit-animation: anim3 0.5s linear infinite;
                }
            }
        }

@-webkit-keyframes anim1 {
        0% {
            top: 0;
        }
        100% {
            top: -600px;
        }
    }
    @-webkit-keyframes anim2 {
        0% {
            top: 0;
        }
        100% {
            top: -900px;
        }
    }
    @-webkit-keyframes anim3 {
        0% {
            top: 0;
        }
        100% {
            top: -1200px;
        }
    }