Question

我正在尝试使用一些带透明度的GIF动画来制作徽标。我希望他们在对方停下来的时候玩。

我在背景中有一些字母作为徽标，我希望在它上面播放GIF。

我试过一个幻灯片脚本：问题是每个gif的持续时间是不同的，所以如果我为gif改变10，那么短的将循环直到时间到了。

我也试过制作一个CSS动画，但它也不起作用，我不知道为什么。

我没有为我使用的其中一个GIF的背景添加透明度。

$(function() {
  $('.fadein img:gt(0)').hide();
  setInterval(function() {
      $('.fadein :first-child').fadeOut()
        .next('img').fadeIn()
        .end().appendTo('.fadein');
    },
    10000);
});

#logo img {
  width: 100%;
  top: 0;
  left: 0;
}

html {
  background-color: black;
}

.fadein {
  position: absolute;
  width: 100%
}

.fadein img {
  position: absolute;
  left: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="logo">
  <div class="fadein">
    <img src="https://media.giphy.com/media/xiqR0MRajmJHWAUp3C/giphy.gif">
    <img src="https://media.giphy.com/media/27IQkS7saXLTviuGH1/giphy.gif">
  </div>
  <img src="https://media.giphy.com/media/1YcDQj7GctoBOIw22z/giphy.gif" alt="LOGO" />
</div>

Answer 1

我相信我已经知道你是否正确，你有一个徽标作为背景，有两个不同的叠加效果在他们自己的时间轴上循环，我计算大约是4450到~5500毫秒~~ 18000毫秒。将setInterval与setTimeout一起使用应该有效。但是，我建议您将这些效果添加到一个单独的gif动画中，但是，您可以通过浏览器进行操作，除非您决定寻找Web浏览器的兼容性，否则它并不重要。这就是我为您所做的，通过我对您的帮助请求的理解：

＆＃13;

$(document).ready(function(){
  $("div#logo img#overlayEffect").attr("src", "https://media.giphy.com/media/xiqR0MRajmJHWAUp3C/giphy.gif?" + (new Date()).getTime());
	setTimeout(function(){
  	$("div#logo img#overlayEffect").attr("src", "https://i.giphy.com/media/27IQkS7saXLTviuGH1/giphy.gif?" + (new Date()).getTime());
	}, 5500);
  
  setInterval(function(){
  	$("div#logo img#overlayEffect").attr("src", "https://media.giphy.com/media/xiqR0MRajmJHWAUp3C/giphy.gif?" + (new Date()).getTime());
    setTimeout(function(){
  		$("div#logo img#overlayEffect").attr("src", "https://i.giphy.com/media/27IQkS7saXLTviuGH1/giphy.gif?" + (new Date()).getTime());
    }, 5500);
  }, 24000);
});

＆＃13;

body {
  background: grey;
}

div#logo {
  background: transparent url('https://media.giphy.com/media/1YcDQj7GctoBOIw22z/giphy.gif');
  width: 480px;
  height: 80px;
  
  /*just for a center*/
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  /*these are /NOT/ required.*/
}

div#logo img#overlayEffect {
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logo">
  <img id="overlayEffect" />
</div>

＆＃13;

动画结束时将GIF替换为其他

1 个答案: