みなさんこんにちは！おさかなです！
今回は「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サイトを華やかにしてみてはいかがでしょうか？(お疲れ様です☕)
↓実際に作成したものがこちら
ホタルの光〜窓のゆき〜〜〜♪
これはホタルじゃないわ！笑
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
↓シナリオ制作に携わった動画
