使用 animation 实现简单的轮播动画

无缝轮播

        *{
            margin: 0;
            padding: 0;
        }
        @keyframes linearUp {
            0% {
            margin-top: 0;
            }
            8% {
            margin-top: 0;
            }
            10% {
            margin-top: -40px;;
            }
            18% {
            margin-top: -40px;;
            }
            20% {
            margin-top: -80px;;
            }
            28% {
            margin-top: -80px;;
            }
            30% {
            margin-top: -120px;;
            }
            38% {
            margin-top: -120px;;
            }
            40% {
            margin-top: -160px;;
            }
            48% {
            margin-top: -160px;;
            }
            50% {
            margin-top: -200px;;
            }
            58% {
            margin-top: -200px;;
            }
            60% {
            margin-top: -240px;;
            }
            68% {
            margin-top: -240px;;
            }
            70% {
            margin-top: -280px;;
            }
            78% {
            margin-top: -280px;;
            }
            80% {
            margin-top: -320px;;
            }
            88% {
            margin-top: -320px;;
            }
            90% {
            margin-top: -360px;;
            }
            98% {
            margin-top: -360px;;
            }
            100% {
            margin-top: -400px;
            }
        }
        .box {
            height: 40px;
            line-height: 40px;
            width: 200px;
            overflow: hidden;
            background: hsl(32, 16%, 72%);
            margin: 20px auto;
        }
        .list {
            height: 440px;
            animation: linearUp 10s linear infinite;
        }
        li {
            height: 40px;
            text-align: center;
        }

    <div class="box">
        <ul class="list">
            <li>这是轮播-1</li>
            <li>这是轮播-2</li>
            <li>这是轮播-3</li>
            <li>这是轮播-4</li>
            <li>这是轮播-5</li>
            <li>这是轮播-6</li>
            <li>这是轮播-7</li>
            <li>这是轮播-8</li>
            <li>这是轮播-9</li>
            <li>这是轮播-10</li>
            <li>这是轮播-1</li>
        </ul>
    </div>

这种适用于少量简单的轮播，过多的话还是需要使用 js 实现。