使用静态 PNG 制作加载图标答案

【问题标题】：Make a loading icon with static PNG使用静态 PNG 制作加载图标
【发布时间】：2022-04-05 17:22:01
【问题描述】：

我打算使用 Javascript 在 HTML 上制作一个带有 PNG 的加载图标..
我的意思是，不是嵌入 GIF..

我找到了loading animated png，但它指的是http://www.ajaxload.info/
它使用 GIF..

有一次我想到了这个想法，GMail 使用这种方法，我检查元素它..
它在图像内使用带有大约 10 个类似齿轮的 PNG..
彼此是同一个齿轮，但有一定程度的旋转差异..

当聊天发送时，它显示一个加载图标，齿轮，但它是一个单独的齿轮，移动，旋转......

我想知道如何做到这一点..
我真的很想避免使用 GIF..

编辑：

我在http://devthought.com/wp-content/projects/mootools/APNG/Demo/得到了我想要的东西
在“预先存在的 DIV 元素（单个图像），每帧间隔”部分.. 感谢您的回答

【问题讨论】：

Ryan 的回答很棒。我会推荐你看看 CSS3 加载动画。是的，这仅适用于现代浏览器，但那是未来 :)
不要使用 APGN，它不是标准的 PNG，它的支持是有限的。没有标准的动画PNG。要么使用动画 GIF，要么使用 Javascript 对一组 PNG“帧”进行伪动画。

标签： javascript html css png

【解决方案1】：

现在是 2022 年，我将更改为：CSS3 Animations，并在此处找到示例：https://flaviocopes.com/rotate-image/ 和下面提供的代码。

.rotate {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />

<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />

<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />

原帖

您可以使用JQuery Rotate，这将允许您旋转页面上的 PNG 图像，以模拟您使用动画 GIF 获得的加载旋转。

【讨论】：