前端多张图片生成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>