html 加css 图片滚动循环显示

<!–资质荣誉 图片滚动显示 循环 –>

<div class=”ry_bot” >

<div class=”ry_bot_box”>

    <div class=”imgList”>

        <img src=”img/ry04.png”/>

        <img src=”img/ry02.png”/>

        <img src=”img/ry03.png”/>

        <img src=”img/ry04.png”/>

        <img src=”img/ry01.png”/>

        <img src=”img/ry02.png”/>

        <img src=”img/ry03.png”/>

        <img src=”img/ry04.png”/>

     </div>

</div>

</div>

css部分

/* 资质荣誉滚动 */

ry_bot{width:100%;height:530px;margin:auto; background-color:#ed141f;clera:both;} 外面的div 用于控制这块。根据需要更改数据

.ry_bot_box{

            width: 1200px;

            height: 500px;

            margin: 40px auto;

            overflow: hidden;

            position: relative;

        }

        .imgList {

            animation:rolling 18s linear infinite;

            position: absolute;

            display: flex;

        }

        .imgList img {

width:280px;

height: 360px;

            float: left;

margin-top:20px;

            margin-right: 10px;

        }

        @keyframes rolling {

            from {

                transform: translateX(0);

            }

            to {

                transform: translateX(-50%);

            }

        }