2

ここで次のアニメーションアイコンを作成しました。

http://jsfiddle.net/KphgD/9

誰かが同等のアイコンをデザインした経験がありますか、またはこれをより良く、より「現実的」にするための提案がありますか？

おそらくJavaScriptを使用してアニメーションをインクリメントし、各カーブが増加する速度で外側に移動するようにします。

4

2 に答える 2

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>

于 2012-06-13T00:39:57.223 に答える
1

ステータスアップデート：

Firefox v14.0.1は、この回答（およびメッセージ内のjsFiddle）を正しくレンダリングできません。v14.0.1より前のバージョンのFirefoxまたは安定したv15.0を使用する

jsFiddleを見ると、Chromeが元のフォントのサイズを変更せずに拡大していることがわかります。

私の目標は、フォントサイズをスケーリングするためのCSSのみのメソッドを含めることでしたが、純粋なCSSではそれを行うことができませんでした。おそらく他の誰かができます。

その後、私の方法は別のアプローチを取りました。そうは言っても、私はあなたの例のすべてのフォントサイズを変更したので、それらは本当に大きくなっています。それから私はすべてspan tagsをラッパーに入れて、divそれを本当に小さくしました。

最終結果は、Chromeでうまく機能するサンプルのHDバージョンです。フォントに表示されるピクセル化されたエッジはもうありません。

現在、CSS3アニメーションは、2つ以上の例がWebページにある場合、安定したビルドのFirefoxv13で速度低下を引き起こします。Chromeにはこの問題は なく、速度を落とすことなくすべてを表示できます。

これが私のjsFiddlesで、10個のCSS3スタイルの例が含まれています。

Firefox用のjsFiddle（1つの例のみが有効になっています）。

jsFiddle for Chrome（10個の例すべてが有効になっています）。

注意： Firefoxは集中的すぎるCSS3アニメーションでチョークするため、 ChromejsFiddleはFirefoxでCPUスパイクを引き起こします。パーチャンスの次の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

于 2012-06-13T09:07:57.947 に答える