直接使用代码

图片素材

点击下载本素材所包含的图片，js文件

css代码

 <style>
.row-h4{background-color:#f8f8f8;padding-top:50px}
.row-h4 h2{font-size:31px;color:#000;text-align:center}
.customer_list{margin:-50px -10px;text-align:center}
.customer_list li{display:inline-block;vertical-align:middle;font-size:0;width:158px;height:158px;line-height:158px;position:relative;margin:0 30px}
.customer_list li .bg{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;border:1px solid #e5e5e5;background-color:#fff;transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg)}
.customer_list li:hover .bg{background-color:#f77026}
.customer_list li .icon{position:relative;z-index:2;display:block;width:100%;height:100%}
.customer_list li .icon img{display:inline-block;vertical-align:middle;max-width:100%;max-height:100%}
.customer_list li .icon .img2,.customer_list li:hover .icon .img1{display:none}
.customer_list li:hover .icon .img2{display:inline-block;vertical-align:middle;max-width:100%;max-height:100%}
.m_customer{padding:140px 0}
</style>

HTML+JS代码

<div class="row-h4">
  <div class="container">
    <h2>部分合作客户LOGO展示</h2>
    <div class="m_customer">
      <ul class="customer_list">
        <li>
          <div class="bg"></div>
          <a href="javascript:;" class="icon">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l06t.png" alt="" class="img1">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l06.png" alt="" class="img2">
          </a>
        </li>
        <li>
          <div class="bg"></div>
          <a href="javascript:;" class="icon">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l07.png" alt="" class="img1">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l07t.png" alt="" class="img2">
          </a>
        </li>
        <li>
          <div class="bg"></div>
          <a href="javascript:;" class="icon">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l08.png" alt="" class="img1">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l07t.png" alt="" class="img2">
          </a>
        </li>
        <li>
          <div class="bg"></div>
          <a href="javascript:;" class="icon">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l09.png" alt="" class="img1">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l07t.png" alt="" class="img2">
          </a>
        </li>
      </ul>
      <ul class="customer_list">
        <li>
          <div class="bg"></div>
          <a href="javascript:;" class="icon">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l10.png" alt="" class="img1">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l07t.png" alt="" class="img2">
          </a>
        </li>
        <li>
          <div class="bg"></div>
          <a href="javascript:;" class="icon">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l11.png" alt="" class="img1">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l07t.png" alt="" class="img2">
          </a>
        </li>
        <li>
          <div class="bg"></div>
          <a href="javascript:;" class="icon">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l06t.png" alt="" class="img1">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l07t.png" alt="" class="img2">
          </a>
        </li>
        <li>
          <div class="bg"></div>
          <a href="javascript:;" class="icon">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l13.png" alt="" class="img1">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l07t.png" alt="" class="img2">
          </a>
        </li>
        <li>
          <div class="bg"></div>
          <a href="javascript:;" class="icon">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l14.png" alt="" class="img1">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l07t.png" alt="" class="img2">
          </a>
        </li>
      </ul>
      <ul class="customer_list">
        <li>
          <div class="bg"></div>
          <a href="javascript:;" class="icon">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l15.png" alt="" class="img1">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l06t.png" alt="" class="img1">
          </a>
        </li>
        <li>
          <div class="bg"></div>
          <a href="javascript:;" class="icon">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l16.png" alt="" class="img1">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l06t.png" alt="" class="img1">
          </a>
        </li>
        <li>
          <div class="bg"></div>
          <a href="javascript:;" class="icon">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l17.png" alt="" class="img1">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l17t.png" alt="" class="img2">
          </a>
        </li>
        <li>
          <div class="bg"></div>
          <a href="javascript:;" class="icon">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l18.png" alt="" class="img1">
            <img src="http://www.bootfastui.cn/img/2021/0516/png_l17t.png" alt="" class="img2">
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>