【问题标题】:Flash at end of looped gif?在循环 gif 结束时闪烁?
【发布时间】:2021-01-17 20:24:33
【问题描述】:

我在 html 文档中的循环 gif 结尾处遇到白色闪烁。我将 gif 显示为背景图像,因为我希望它平铺。各个帧都很好看,最后没有白框。

有人有编码或基于代码的解决方案吗?我在 Photoshop 中使用传统的“保存为网络”功能。我不使用 .webp 或其他现代动画格式的原因是我想要经典的抖动 gif 外观。

这是链接:www.natehess.com/index.html

gif 太大,这里上传不了,这里有一个链接:www.natehess.com/fractal.gif

谢谢!

<html>
<style type="text/css">
    body {
        margin: 0px;    
    }
    .splash {
        width: 100vw;
        height: 100vh;
        background-image: url(http://www.natehess.com/fractal.gif);
        border: 0px;
        padding: 0px;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
    }
</style>
<body>
    <div class="splash"></div>
</body>
</html>

【问题讨论】:

  • 你的 gif 基本上有这个«白色»闪光或最后一个白框。所以你需要编辑 gif 持续时间来修复它。因为这意味着持续时间>动画

标签: html css gif


【解决方案1】:

你的第 393 帧是白色的。

我使用https://ezgif.com/ 移除了框架并将其从 3MB 优化到了 1.7MB

<html>
<style type="text/css">
  body {
    margin: 0px;
  }
  
  .splash {
    width: 100vw;
    height: 100vh;
    background-image: url(https://i.stack.imgur.com/AHfNO.gif);
    border: 0px;
    padding: 0px;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
  }
</style>

<body>
  <div class="splash"></div>
</body>

</html>

【讨论】:

  • 感谢 mlunjan 的帮助。白色框架是 Photoshop 渲染的一个小故障。我正在处理故障版本中的图像序列。我把这些帧变成了一个 mp4,把它加载到 photoshop 并正确导出。
猜你喜欢
  • 1970-01-01
  • 2019-11-30
  • 1970-01-01
  • 2015-10-28
  • 2012-09-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多