循环轮播一张长图思路：放两张一样的图片在同一行，当移动到两张图片的父元素的一半时，再重新运行注意：如果是行内元素时

思路：

放两张一样的图片在同一行，当移动到两张图片的父元素的一半时，再重新运行

注意：

如果是行内元素时，两个元素之间会有空格间隙的问题，可能会导致父元素设置了200%两个子元素却放不下一行的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .dv-logo{
            position: absolute;
            top: 500px;
        }
        .dv-logo>div{
            position: relative;
            width: 200%;
            height: 60px;
            animation: 10s linear 0s infinite normal both running logo-moving;
            background-color: #006cc8;
            font-size: 0;
        }
        .lunbo{
            width: 1900px;
            height: 30px;
            background-color: pink;
            border: 1px solid #000;
            display: inline-block;
            font-size: 16px;
        }
    


        @keyframes logo-moving {
            0% {
                transform: translate3d(0, 0, 0);
            }
            100% {
                transform: translate3d(-50%, 0, 0);
            }
        }

    </style>
</head>
<body>
    <iframe src="./radial.svg" width="500" height="500" frameborder="0"></iframe>
    <div class="dv-logo">
        <div>
            <div class="lunbo">12344566667789</div>
            <div class="lunbo">12344566667789</div>
        </div>
    </div>
</body>
</html>