みなさんこんにちは!おさかなです!
今回は「Animated CSS Background Generator」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・ふわふわ漂う泡のようなアニメーションを作りたい方
・おしゃれなCSSアニメーションを生成したい方
・円形、四角形など図形を動かしたい方
「Animated CSS Background Generator」って何?
「Animated CSS Background Generator」とは、(@wweb_dev)さんが開発した「ゆっくり動くCSSアニメーション」が生成できるサイトのことです。マウス操作で動きのあるコードを生成。コピペで、すぐに実装できます!(おしゃれ✨)


実際に使ってみよう!
それでは早速サイトにアクセスしましょう!

デフォルトでは、泡のような円形が動くアニメーションとなっています!(きれい🎈)

アニメーションをカスタマイズしよう!
左のメニューから、カスタマイズが可能。

「Count」の値を変更すると、「丸の数」を増減できます!(おお!)

「Size」からは、丸の大きさを変えられます。(雰囲気変わる〜)

「Average Speed」では、丸の動くスピードを変えられます!

「Background Color」では背景色、「Circle Colors」では、丸の色を変更できます。(いいね👍)

また「プラスマイナス+ー」ボタンを押すと、色の数も指定できます。最大8つまで指定可能です!(カラフル🎨)

背景色を変えると、イメージがガラッと変わります🎵

こちらはハッカーっぽい配色。(電子ワールド!💻)

ちなみに、アニメーションは3種類あり「Demo1〜3」まで切り替えられます。

「Demo2」は、下から四角形が流れてくるようなアニメーションです。

「Demo3」は、回転した四角形が、浮き出てくるもの。()


(ひと休み💤)
コードを確認しよう!
アニメーションができたら、「Code」タブからHTML/CSSコードを確認しましょう!(よーし!)

ボタンを押すと、ソースコードを「コピー」できます。

コピーしたコードを、貼り付けるとこんな感じ。HTMLファイルの<body>タグ内に、コードを設置しています!(ふむふむ…。)

CSSファイルは、こんな感じです。
ぜひみなさんも、アニメーション生成ツールを活用して、Webサイトを華やかにしてみてはいかがでしょうか?(お疲れ様です☕)

↓実際に作成したものがこちら


ホタルの光〜窓のゆき〜〜〜♪

これはホタルじゃないわ!笑
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!

↓シナリオ制作に携わった動画