コピペで簡単!ボタンやテキストリンク、アイコンで使えるCSSのさまざまなアニメーション -CSSeffectsSnippets

ボタンやテキストリンク、アイコン、プリローダーなどで使えるCSSのさまざまなアニメーションがコピペで簡単に利用できるCSSeffectsSnippetsを紹介します。

CSSのエフェクトはスニペットに登録しておくと、すぐに使えて便利です。

ボタンやテキストリンク、アイコン、プリローダーで使えるCSSのさまざまなアニメーション

CSSeffectsSnippets -GitHub

CSSeffectsSnippetsのデモ

デモページでは、ボタンやテキストやアイコンのさまざまなエフェクトが実装されています。ちなみに、デモはVue.jsで構築されています。

サイトのキャプチャ

CSSeffectsSnippets

以前、紹介した時からかなり増えています!

CSSeffectsSnippetsの使い方

使い方は簡単です。
デモページでエフェクトをクリックすると、CSSがコピーされます。あとは、ボタンやテキストやアイコンのHTMLを用意するだけです。

デモを実際にいくつかコピペしてみました。

テキスト

テキストをホバーすると、下線がアニメーションで表示されます。

HTMLはpタグにclassを与えるだけです。

カーソルをポインターにするために、CSSにcursor: pointer;を加えました。

ボタン

ボタンをホバーすると、パルスのエフェクトでアニメーションします。

HTMLはdivタグにclassを与えるだけです。
buttonタグでも機能しますが、外観のスタイルを加える必要があります。

カーソルをポインターにするために、CSSにcursor: pointer;を加えました。

Webページやスマホアプリで見かけるスピナーも簡単です。

スピナーは空のdivタグにclassを与えるだけです。

スピナーも数行のCSSで簡単に実装できます。

ここをクリック、ここに注目のバウンドするアニメーションです。

divタグにclassを与え、アイコンを用意します。上記はSVGコードで、矢印のアイコンを実装しています。

バウンドの弾みやタイミングなどをカスタマイズできます。

デモページでは、他にもたくさんのアニメーションがコピペできます。

サイトのキャプチャ

CSSeffectsSnippets

sponsors

top of page

©2024 coliss