创建纯HTML5 + CSS3动画“声纳波”的最佳方法图标。 [英] Best method for creating a pure HTML5 + CSS3 animated "sonar wave" icon.

问题描述

我在此处创建了以下动画图标：

http://jsfiddle.net/KphgD/9

任何人都有设计类似图标的任何经验，或有任何建议，使这更好​​，更多现实？

我会开放使用javascript增加动画，使每条曲线以增加的速度向外移动。

解决方案

状态更新：

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

---

jsFiddle，我可以看到Chrome是 扩大原始字体而不调整它的大小。

我的目标是包括CSS的方法来缩放字体大小，但我不能在纯CSS。也许其他人可以。

我的方法采用了不同的方法。也就是说，我改变了你的示例中的所有字体大小，所以他们真的很大。然后我将所有 span标签放置在包装器 div 中，并使其非常小。

最终结果是您的示例的高清版本，可在Chrome中正常运行。

目前， CSS3动画会导致稳定版本放缓 Firefox v13 当网页上有2个或更多个示例时。 Chrome 没有此问题，可以没有减速

显示 $ b

---

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

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


jsFiddle

提醒： Chrome jsFiddle会在Firefox中导致 CPU尖峰，因为Firefox阻塞CSS3动画太密集。 风味，则可以使用任何立方贝塞尔。有许多在线缓动生成器可以提供预设值或自定义值，例如此生成器 此处 。只需选择宽松预设，然后按左键即可查看。如果您喜欢，请只复制立方体贝塞尔，并使用它：

 。 pulse {
 -webkit-animation：pulsate 1.600s infinite cubic-bezier（0.190，1.000，0.220，1.000）; 
 -moz-animation：pulsate 1.600s无限立方贝塞尔曲线（0.190,1.000,0.220,1.000）; 
} 
  

只需更改 1.600s 持续时间到您使用或调整所需的时间。

单例： jsFiddle

I've created the following animated icon here:

http://jsfiddle.net/KphgD/9

Does anyone have any experience designing a comparable icon or have any suggestions on making this better, more "realistic"?

I would be open to using javascript perhaps to increment the animations so that each curve moves outward at an increasing rate.

解决方案

Status Update:

Firefox v14.0.1 fails to render this Answer (and jsFiddle's in messages) correctly. Use Firefox version prior to v14.0.1 or stable v15.0

---

Looking at your jsFiddle, I can see that Chrome is enlarging the original font without resizing it.

My goal was to include CSS only method to scale the Font Size, but I could not do that in pure CSS. Perhaps somebody else can.

My method then took a different approach. That said, I changed all the font sizes in your example so they are really large. Then I placed all the span tags in a wrapper div and made that really small.

The end result is a HD Version of your example that works well in Chrome. No more pixelated edges to see on the font.

Currently, the CSS3 Animations causes slowdown in stable build Firefox v13 when 2 or more examples are on the webpage. Chrome does not have this problem and can display all of them with no slowdown!

---

Here are my jsFiddles that includes 10 CSS3 style examples:

jsFiddle for Firefox (just 1 example is enabled).

jsFiddle for Chrome (all 10 examples are enabled).

Reminder: The Chrome jsFiddle will cause CPU Spike in Firefox since Firefox chokes on CSS3 Animations that are too intensive. Perchance next Firefox update fixes that bug.

---

Edit: For a different easing flavor, you can use any cubic-bezier. There are many Online Easing Generators that will supply a preset or custom made value such as this generator HERE. Just select an easing preset and hit the Left Button to view it. Then if you like it, copy only the cubic-bezier and use it like so:

.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);
}

Just change the 1.600s duration to what you your using or adjust as required.
Single Example: jsFiddle

这篇关于创建纯HTML5 + CSS3动画“声纳波”的最佳方法图标。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！