主页 / 问题 / 1230560
Accepted
Leonel
Asked:2022-01-13 04:04:36 +0800 CST2022-01-13 04:04:36 +0800 CST

Bg身体上的Gif

  • 772

我想让它在播放一次 gif 后停止，但同时我的 gif 在 bg 主体中，我不知道如何停止它）））好吧，或者至少，推荐GIF 处理程序，其中有一个可以停止循环的函数。

body {
      background-image: url(2021-01-12_22-32-00_Trim.gif);
      height: 100%;
      margin: 0;
    }
javascript

1 个回答

  1. Best Answer

    创建动画时，您可以禁用动画的重播，从而达到预期的效果。

    这是来自互联网的答案之一的示例：

    在GIMP2.6.11图形编辑器中打开这个动画，只保存为 GIF 动画，但是保存时，在“另存为 GIF”框中，取消选中（复选框）在该行 ->“无限循环”。
    就这样！

    body {
  background: url('//i.imgur.com/6YtXskw.gif') no-repeat center center / cover;
  height: 100vh;
  margin: 0;
}

    如果还不行，那就通过JS，但是为此你需要找出所需帧的时间，以及帧本身作为静态图片。

    let gifUrl = new Image(), keyUrl = new Image(),
    timing = 2500; // Тайминг, когда нужно заменить картинку
    
gifUrl.src = '//i.imgur.com/vV8Ndee.gif'; // Ссылка на гиф
keyUrl.src = '//i.imgur.com/k4KapkC.gif'; // ссылка на кадр

gifUrl.onload = function(){ // Как загрузится анимация
  document.body.style.backgroundImage = `url(${gifUrl.src})`; // Добавляем её к фону 
  setTimeout(function(){ // Запускаем таймер
    document.body.style.backgroundImage = `url(${keyUrl.src})`; // Меняем на статичную картинку
  }, timing);
};
    body {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 100vh;
  margin: 0;
}

    • 2

相关问题