[CSS]フラットなデザインに使いたい！タップ時の新しいエフェクト「波紋」のアニメーションを実装するテクニック

Googleが先日発表したAndroid Lで使われる新しいUX「Material Design」で採用されているようなタップすると波紋のように円が広がるエフェクトを実装するテクニックを紹介します。 タップやクリックでよく見かけるのは、押した感じにへこむエフェクトでしたが、この波紋はフラットにあっててなかなかいいエフェクトですね。 Material Design 波紋状のエフェクトのコードは、下記のようになります。 HTML div要素で矩形のボタンを作成します。ラベルはスタイルシートのcontent属性で配置しています。 <div id="button" class="android-btn"></div> <div id="button2" class="android-btn ink"></div> CSS エフェクトのアニメーション、ボタンのサイズや波紋の大きさは、スタイルシートで

[zyakky]

[01_33_CSS/Animation]

[ta-nbl]

使いたい

[o_hiroyuki]

ボタンクリック時のエフェクト

[kijtra]

やめてあげて。

[haru135]

波形

[z1a2nh]

地雷

[poppun1940]

Googleが先日発表したAndroid Lで使われる新しいUX「Material Design」で採用されているようなタップすると波紋のように円が広がるエフェクトを実装するテクニックを紹介します。 タップやクリックでよく見かけるのは、押した

[s99e209]

波紋状のエフェクトをCSS3とJavascriptで表現。このアニメーションエフェクトはフラットデザインに馴染んでていい感じ。

[ku_marin]

波紋ぽわ～ん

[north_korea]

使ってみよう

[qrac_jp]

意外と簡単に実装できるっぽい。

[aoasagi]

ええなーこれ。こんど使おう

[soratomo]

これはいい〜

[zyusou]

いいですなぁ。

[sho_yamane]

これええかも。

[ebisu3htn]

Googleが先日発表したAndroid Lで使われる新しいUX「Material Design」で採用されているようなタップすると波紋のように円が広がるエフェクトを実装するテクニックを紹介します。 タップやクリックでよ […] via コリス http://coliss.c

[kana321]

Googleが先日発表したAndroid Lで使われる新しいUX「Material Design」で採用されているようなタップすると波紋のように円が広がるエフェクトを実装するテクニックを紹介します。

[hedeyoshi]

動きが可愛いのとjsの書き方がきれいな気がする。

[kiyo_hiko]

波紋の