纯css滚动logo组图左右遮罩

效果展示 

HTML 

<div class="service_item_img">
    <!--第一行-->
    <div class="service_item_box">
        <!--第一行第一条-->
        <div class="partner-scroll-list-box">
            <div class="img_item">
                这里面是图片，循环N多个
            </div>
            <div class="img_item">
                这里面是图片，循环N多个
            </div>
        </div>

        <!--第一行第二条 无缝滚-->
        <div class="partner-scroll-list-box">
            <div class="img_item">
                这里面是图片，循环N多个
            </div>
            <div class="img_item">
                这里面是图片，循环N多个
            </div>
        </div>
    </div>

    <!--第二行-->
    <div class="service_item_box">
        <!--第二行第一条-->
        <div class="partner-scroll-list-box2">
            <div class="img_item">
                这里面是图片，循环N多个
            </div>
            <div class="img_item">
                这里面是图片，循环N多个
            </div>
        </div>

        <!--第二行第二条 无缝滚-->
        <div class="partner-scroll-list-box2">
            <div class="img_item">
                这里面是图片，循环N多个
            </div>
            <div class="img_item">
                这里面是图片，循环N多个
            </div>
        </div>
    </div>
</div>

 css

/* 最大滚动区域的外容器*/
.service_item_img{
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    flex-direction: column;
    height: 220px;
    overflow: hidden;
    width: 1180px;
}

/* 最大滚动区域的外容器的左遮罩*/
.service_item_img::before{
    content: '';
    width: 100px;
    height: 200px;
    position: absolute;
    top: 0;
    z-index: 10;
    left: 0;
    background: linear-gradient(90deg, rgba(255,255,255,1), transparent);
}

/* 最大滚动区域的外容器的右遮罩*/
.service_item_img::after{
    content: '';
    width: 100px;
    height: 200px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    background: linear-gradient(-90deg, rgba(255,255,255,1), transparent);
}


/* 一行logo的外容器*/
.service_item_img .service_item_box{
    display: flex;
    height: 100px;
    padding: 10px;
}

/* 第一行logo*/
.service_item_img .partner-scroll-list-box{
    animation: run 43s linear infinite;
    display: flex;
    height: 90px;
    margin: 0 auto;
    overflow: hidden;
    width: 3572px!important;
}

/* 第二行logo*/
.service_item_img .partner-scroll-list-box2{
    animation: run 43s linear infinite;
    display: flex;
    height: 90px;
    margin: 0 auto;
    overflow: hidden;
    width: 3630px!important;
}

/* 单个小logo块*/
.service_item_img .partner-scroll-list-box .img_item{
    align-items: center;
    background: #fff;
    display: flex;
    border: 1px solid #f5f5f5;
    border-radius: 10px;
    height: 80px;
    justify-content: center;
    box-shadow: 0 5px 7px rgba(0,0,0,0.02);
    margin-right: 20px;
    width: 188px;
}

这里的实现思路：

一、结构

1、后端返回图片结果，利于工具型网站的全站维护

2、前端是list显示，两个box分为两行去承载显示，无论需求如何变化，都是麻烦第一次后面超级好维护。反正都是最小颗粒度了，无非就是换换皮、换换动效而已，很快就完成需求

3、第一行和第二行利用宽度显示错落展示效果；

二、遮罩层

左右遮罩层用的是css，适合单色背景情况，100px宽的白色渐变到透明，超级好用，再也不用麻烦设计小姐姐了

其他动效样式

利用上面那种形式，还可以让每一行滚动的速度不同，显示出错落的效果；还可以让两行一个往左滚，一个往右滚都是可以的。

对于比较少的logo图片，可以直接用两张特别宽的图去无缝滚动，左右两侧用两个css写的遮罩层，看数据量和是否经常变化来选定实现技术。

如果是3行 4行，也是差不多的原理。