Question

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

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

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

Answer 1

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

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

修改

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

◠ ◠ ◠ ◠ • .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积。使用缓动和持续时间来调整它。

Answer 2

状态更新：

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

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

我的目标是只包含CSS方法来缩放字体大小，但我不能在纯CSS中这样做。也许别人可以。

我的方法采用了不同的方法。也就是说，我更改了示例中的所有字体大小，因此它们非常大。然后我将所有span tags放在包装器div中并使其非常小。

最终结果是您的示例的 HD版在Chrome中运行良好。没有更多的像素化边缘可以在字体上看到。

目前，当网页上有2个或更多示例时， CSS3动画会导致稳定构建 Firefox v13 的速度减慢。 Chrome 没有此问题，可以没有减速显示所有！

以下是我的jsFiddles，其中包含 10 CSS3样式示例：

Firefox的

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

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

提醒： Chrome jsFiddle会导致Firefox中的 CPU Spike ，因为Firefox会对CSS3动画过于强烈。 Perchance下一个Firefox更新修复了该错误。

修改：对于其他缓动风格，您可以使用任何 cubic-bezier 。有许多在线缓动生成器，它们将提供预设或自定义值，例如此生成器HERE。只需选择一个缓动预设，然后点击左键即可查看。然后，如果你喜欢它，只复制 cubic-bezier 并像这样使用它：

.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

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

2 个答案: