波浪线 css

<div class="index4_list2">
    <div class="bg">
        <img src="https://www.yuhucoldchain.com/Public/Home/images/bg_line.png" width="100%">
        <img src="https://www.yuhucoldchain.com/Public/Home/images/bg_line1.png" width="100%">
        <img src="https://www.yuhucoldchain.com/Public/Home/images/bg_line3.png" width="100%">
    </div>
    <div class="box">
        <ul class="list wow fadeIn" data-wow-delay=".3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeIn;">
        <li>
                <div class="dian_sum">
                    <div class="dian">
                        <img src="/Uploads/Temp/image/20210825/6126028fce394.png" width="32%">
                    </div>
                    <div class="dian" style="background-image: url('/Public/Home/images/banner_index1.png')">
                        <img src="https://www.yuhucoldchain.com/Uploads/Temp/image/20210825/6126028fce394.png" width="32%">
                    </div>
                </div>
                <div class="lans">
                    <div class="l1">创新</div>
                    <div class="l2">CREATIVITY</div>
                </div>
            </li><li>
                <div class="dian_sum">
                    <div class="dian">
                        <img src="/Uploads/Temp/image/20210825/612602ddaddd2.png" width="32%">
                    </div>
                    <div class="dian" style="background-image: url('/Public/Home/images/banner_index1.png')">
                        <img src="https://www.yuhucoldchain.com/Uploads/Temp/image/20210825/6126028fce394.png" width="32%">
                    </div>
                </div>
                <div class="lans">
                    <div class="l1">简捷</div>
                    <div class="l2">AGILITY</div>
                </div>
            </li><li>
                <div class="dian_sum">
                    <div class="dian">
                        <img src="/Uploads/Temp/image/20210825/612603bc44d14.png" width="32%">
                    </div>
                    <div class="dian" style="background-image: url('/Public/Home/images/banner_index1.png')">
                        <img src="https://www.yuhucoldchain.com/Uploads/Temp/image/20210825/6126028fce394.png" width="32%">
                    </div>
                </div>
                <div class="lans">
                    <div class="l1">品质</div>
                    <div class="l2">QUALITY</div>
                </div>
            </li><li>
                <div class="dian_sum">
                    <div class="dian">
                        <img src="/Uploads/Temp/image/20210825/612603e3bef37.png" width="32%">
                    </div>
                    <div class="dian" style="background-image: url('/Public/Home/images/banner_index1.png')">
                        <img src="https://www.yuhucoldchain.com/Uploads/Temp/image/20210825/6126028fce394.png" width="32%">
                    </div>
                </div>
                <div class="lans">
                    <div class="l1">共享</div>
                    <div class="l2">SYNERGY</div>
                </div>
            </li>                      
        </ul>
    </div>
</div>

.index4_list2 {
    position: relative;
    overflow: hidden;
}

.index4_list2 .bg img {
    width: 110%;
    position: absolute;
    bottom: 0;
    left: -5%;
    z-index: 3;
    animation: line_animation 7s linear infinite;
}

.index4_list2 .bg img:nth-child(1) {
}

.index4_list2 .bg img:nth-child(2) {
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
}

.index4_list2 .bg img:nth-child(3) {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

/*animation: quan 1.8s linear infinite;*/
@-webkit-keyframes line_animation {
    0% {
        bottom: 0;
        left: -5%;
    }

    50% {
        opacity: .88;
        bottom: 5%;
        left: 5%;
    }

    100% {
        bottom: 0;
        left: -5%;
    }
}