前端多张图片生成Gif效果，

木叶随风而逝

已于 2024-04-22 09:46:02 修改

阅读量1.5k

点赞数 1

文章标签： css javascript html

于 2021-09-17 15:31:53 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39041201/article/details/120349884

版权

前端多张图片生成Gif效果，

例：如下三张图片

效果展示：

在这里插入图片描述

方式一（css）:

<style>
    *{padding: 0;margin: auto;}
    .box{width: 200px;height: 50px;position: relative;}
    .box img{position: absolute; width: 100%;height: 100%;}
    .sloganBg01{ z-index: 3; animation: slogan1 1.5s linear infinite;}
    .sloganBg02{ z-index: 2; animation: slogan2 1.5s linear infinite;}
    .sloganBg03{ z-index: 1; animation: slogan3 1.5s linear infinite;}
    @keyframes slogan1 {
      0%{ opacity: .9;}
      33%{opacity: 1}
      34%{ opacity: 0;}
      100%{ opacity: 0;}
    }
    @keyframes slogan2 {
      0%{ opacity: 0}
      33%{ opacity: 0}
      34%{ opacity: .9}
      66%{ opacity: 1}
      67%{ opacity: 0}
      100%{ opacity: 0}
    }
    @keyframes slogan3 {
      0%{ opacity: 0}
      66%{ opacity: 0}
      67%{ opacity: .9}
      100%{ opacity: 1}
    }
  </style>
  <div class="page">
    <div class="box">
      <img class="sloganBg01" src="images/img1.png" alt="">
      <img class="sloganBg02" src="images/img2.png" alt="">
      <img class="sloganBg03" src="images/img3.png" alt="">
    </div>
  </div>

方式2（js效果）：

<style>
    *{padding: 0;margin: auto;}
    .box{width: 200px;height: 50px;position: relative;}
    .box img{position: absolute; width: 100%;height: 100%;}
  </style>
  <div class="page">
    <div class="box">
      <img style="display: block;" src="images/img1.png" alt="">
      <img style="display: none;" src="images/img2.png" alt="">
      <img style="display: none;" src="images/img3.png" alt="">
    </div>
  </div>
  <script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
  <script>
    var length = $("img").length;
    timer = setInterval(function () {
      length++;
      length %= 3;
      $("img").eq(length - 1).hide()
      $("img").eq(length).show();
    }, 500);
    
  </script>