html - 创建纯 HTML5 + CSS3 动画“声纳波”图标的最佳方法。

Question

我在这里创建了以下动画图标：

http://jsfiddle.net/KphgD/9

有没有人有设计类似图标的经验，或者有什么建议让这个更好，更“现实”？

我愿意使用 javascript 来增加动画，以便每条曲线以增加的速度向外移动。

Answer 1

检查这部分动画原理 https://en.wikipedia.org/wiki/12_basic_principles_of_animation#Follow_through_and_overlapping_action

而不是一次显示全部，重叠各个弧的某些动作。

编辑

例如：http: //jsfiddle.net/efortis/KphgD/7/

<span class="pulse1 circ">&#9696;</span>
<span class="pulse2 circ med">&#9696;</span>
<span class="pulse3 circ small">&#9696;</span>
<span class="pulse4 circ tiny">&#9696;</span>
<span class="circ small point">&#8226;</span>

.pulse1 { -webkit-animation: pulsate 1.1s infinite ease-out; }
.pulse2 { -webkit-animation: pulsate .9s infinite ease-out; }
.pulse3 { -webkit-animation: pulsate .7s infinite ease-out; }
.pulse4 { -webkit-animation: pulsate .2s infinite ease-out; }

PD 使用缓动和持续时间来调整它。​</p>

Answer 2

状态更新：

Firefox v14.0.1 无法正确呈现此答案（以及消息中的 jsFiddle）。使用 Firefox v14.0.1 之前的版本或稳定的 v15.0

---

查看您的 jsFiddle，我可以看到 Chrome 正在放大原始字体而不调整其大小。

我的目标是包含唯一的 CSS 方法来缩放字体大小，但我无法在纯 CSS 中做到这一点。也许其他人可以。

然后我的方法采取了不同的方法。也就是说，我更改了您示例中的所有字体大小，因此它们非常大。然后我把所有的东西都span tags放在一个包装纸里，让它div变得非常小。

最终结果是您的示例的高清版本在 Chrome 中运行良好。在字体上看不到更多的像素化边缘。

目前，当网页上有 2 个或更多示例时， CSS3 动画会导致稳定版本Firefox v13的速度变慢。Chrome没有这个问题，可以 毫无减速地显示所有这些！

---

这是我的 jsFiddles，其中包括10 个CSS3 样式示例：

用于 Firefox 的jsFiddle（仅启用了 1 个示例）。

适用于 Chrome 的jsFiddle（所有 10 个示例均已启用）。

提醒： Chrome jsFiddle 会导致 Firefox 中的CPU 峰值，因为 Firefox 会阻塞过于密集的 CSS3 动画。下一次 Firefox 更新可能会修复该错误。

---

编辑：对于不同的缓动风格，您可以使用任何三次贝塞尔曲线。有许多在线缓动生成器将提供预设或定制值，例如这里的生成器。只需选择一个缓动预设并点击左键即可查看。然后，如果您喜欢它，请仅复制三次贝塞尔曲线并像这样使用它：

.pulse{
    -webkit-animation: pulsate 1.600s infinite cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -moz-animation: pulsate 1.600s infinite cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

只需将1.600s持续时间更改为您使用的时间或根据需要进行调整。
单个示例：jsFiddle