梦幻西游动画效果展示

展示如下图动画效果：
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>梦幻西游</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html,body,.content{
            width: 100%;
            height: 100%;
        }
        .content{
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        .bg{
            position: relative;
            width: 3920px;
            height: 100%;
            background-image: url('./img/bg.jpg');
            background-repeat: repeat-x;

            animation-name: bg;/* 引用的动画名称 */
            animation-duration: 46s;/* 动画持续时间/次 */
            animation-timing-function: linear;/*动画执行的时间曲线为线性,即匀速*/
            animation-iteration-count: infinite;/* 无限循环 */
        }
        .st{
            position: absolute;
            width: 950px;
            height: 180px;
            left: 50%;
            margin-left: -475px;
            bottom: 220px;
        }
        .st>ul{
            width: 950px;
            height: 180px;
            display: flex;
        }
        .st>ul>li{
            flex: 1;
            margin-right: 50px;
            overflow: hidden;
        }
        .st >ul >li >div{
            width: 1600px;
            height: 180px;
            font-size: 0;

            animation-name: st; /* 引用的动画名称 */
            animation-duration: 1s;/* 动画持续时间/次 */
            animation-iteration-count: infinite;/* 无限循环 */
            animation-timing-function: steps(8);/* 图长1600px，走8步，每次跨度为200px */
            /* 引用动画效果名为st的动画，1s内走八步，每部跨度为200px即为一张小图，打开浏览器将无限循环至关闭浏览器 */
        }
        .st >ul >li >div>img{
            width: 100%;
        }

        @keyframes st{  /*动画效果，从师徒图片的最左边到图片的最右边*/
            from{
                margin-left: 0;
            }
            to{
                margin-left: -1600px;
            }
        }

        @keyframes bg{/*动画效果，从背景图片的最右边到图片的最左边*/
            from{
                left: -1920px;
            }
            to{
                left: 0px;
            }
        }

    </style>
</head>
<body>
    <div class="content">
        <!-- 背景 -->
        <div class="bg"></div>
        <!-- 师徒四人 -->
        <div class="st">
            <ul>
                <li>
                    <div><img src="./img/wk.png"></div>
                </li>
                <li>
                    <div><img src="./img/bj.png"></div>
                </li>
                <li>
                    <div><img src="./img/ts.png"></div>
                </li>
                <li>
                    <div><img src="./img/ss.png"></div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>