[CSS]テキストリンクやボタン、プリローダーなどで使えるCSSアニメーションのスニペット集 -CSSeffectsSnippets

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

気になったアニメーションは、スニペットなどに登録しておくと便利ですね。

サイトのキャプチャ

CSSeffectsSnippets
CSSeffectsSnippets -GitHub

CSSeffectsSnippetsのデモ

デモでは、CSSのさまざまなエフェクトを楽しめます。
ちなみに、Vue.jsで構築されています。

サイトのキャプチャ

デモページ

CSSeffectsSnippetsの使い方

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

HTML

空のdiv要素を用意し、classを与えるだけです。

CSS

コピペしたCSSは下記の通り。

ホバーしてみて

HTML

テキストにclassを与えるだけです。

CSS

コピペしたCSSは下記の通り。リンク要素ではない場合は、「cursor: pointer;」を加えるとカーソルがポインターになります。

ホバーしてみて

HTML

ラッパーのdiv要素とspan要素でボタンを実装します。

CSS

コピペしたCSSは下記の通り。リンク要素ではない場合は、「cursor: pointer;」を加えるとカーソルがポインターになります。

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

サイトのキャプチャ

デモページ

sponsors

top of page

©2024 coliss