2つのアイコンを選択してアニメーションさせるCSSを簡単に生成できるサイト

         

CSS

2つのアイコンを選択してアニメーションさせるCSSを簡単に生成できるサイト

2021年05月24日 8:00 

2つのアイコンを選択してアニメーションさせるCSSを簡単に生成できるサイト

こんにちは!社員Kです。

本日は、2つのアイコンを選択してアニメーションさせるCSSを簡単に生成できるサイト「CSS ICON」のご紹介です。

 



CSS ICONにアクセス

まずは、下記のサイトにアクセス

https://cssicon.space/#/animate

 

2つのアイコンを選択するだけ

そしてアイコンを2つ選択します。
例えば、よくあるメニューアイコンの三本線アイコンから×マークの閉じるアイコンのアニメーションを作りたい場合なら、下記のように選択します。

 

アニメーション用のCSSが生成されます

下記のようにCSSが生成されます。
CSSをコピーしてサイトで使用することができます。

Image from Gyazo

 

 

関連記事

この記事を書いた人

社員K

福岡でWebプログラマー・フロントエンドエンジニアとして10年目。まだまだ勉強することが沢山あるなぁと最近良く思います。日本語には自信があります。すぐに効くダイエット情報募集中!