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