みなさんこんにちは!おさかなです!
今回は「Animated CSS Background Generator」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・ふわふわ漂う泡のようなアニメーションを作りたい方
・おしゃれなCSSアニメーションを生成したい方
・円形、四角形など図形を動かしたい方
「Animated CSS Background Generator」って何?
「Animated CSS Background Generator」とは、(@wweb_dev)さんが開発した「ゆっくり動くCSSアニメーション」が生成できるサイトのことです。マウス操作で動きのあるコードを生成。コピペで、すぐに実装できます!(おしゃれ✨)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/382afe374cd2405e633d3c5dc0eac748.jpg)
![](https://osakanav.com/wp-content/uploads/2023/01/edisone-top-160x90.png)
実際に使ってみよう!
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2023/01/animated-1.png)
デフォルトでは、泡のような円形が動くアニメーションとなっています!(きれい🎈)
![](https://osakanav.com/wp-content/uploads/2023/01/animated.gif)
アニメーションをカスタマイズしよう!
左のメニューから、カスタマイズが可能。
![](https://osakanav.com/wp-content/uploads/2023/01/BL8FVWxxYJ3Frgt1674099032_1674099069.png)
「Count」の値を変更すると、「丸の数」を増減できます!(おお!)
![](https://osakanav.com/wp-content/uploads/2023/01/animated-count-1.png)
「Size」からは、丸の大きさを変えられます。(雰囲気変わる〜)
![](https://osakanav.com/wp-content/uploads/2023/01/animated-size-1.png)
「Average Speed」では、丸の動くスピードを変えられます!
![](https://osakanav.com/wp-content/uploads/2023/01/animated-speed.gif)
「Background Color」では背景色、「Circle Colors」では、丸の色を変更できます。(いいね👍)
![](https://osakanav.com/wp-content/uploads/2023/01/animatedor-1.png)
また「プラスマイナス+ー」ボタンを押すと、色の数も指定できます。最大8つまで指定可能です!(カラフル🎨)
![](https://osakanav.com/wp-content/uploads/2023/01/L5rjoaAIQjKoFOp1674099619_1674099631-1.png)
背景色を変えると、イメージがガラッと変わります🎵
![](https://osakanav.com/wp-content/uploads/2023/01/animated-haisyoku-1.png)
こちらはハッカーっぽい配色。(電子ワールド!💻)
![](https://osakanav.com/wp-content/uploads/2023/01/animated-green-1.png)
ちなみに、アニメーションは3種類あり「Demo1〜3」まで切り替えられます。
![](https://osakanav.com/wp-content/uploads/2023/01/BL8FVWxxYJ3Frgt1674099032_1674099043.png)
「Demo2」は、下から四角形が流れてくるようなアニメーションです。
![](https://osakanav.com/wp-content/uploads/2023/01/animated-sq.gif)
「Demo3」は、回転した四角形が、浮き出てくるもの。()
![](https://osakanav.com/wp-content/uploads/2023/01/animated-kaiten.gif)
![](https://osakanav.com/wp-content/uploads/2022/10/flexboxfroggy-top-160x90.png)
(ひと休み💤)
コードを確認しよう!
アニメーションができたら、「Code」タブからHTML/CSSコードを確認しましょう!(よーし!)
![](https://osakanav.com/wp-content/uploads/2023/01/2t2DZe1RcGcQIgB1674099139_1674099152.png)
ボタンを押すと、ソースコードを「コピー」できます。
![](https://osakanav.com/wp-content/uploads/2023/01/2t2DZe1RcGcQIgB1674099139_1674099201.png)
コピーしたコードを、貼り付けるとこんな感じ。HTMLファイルの<body>タグ内に、コードを設置しています!(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2023/01/llawSqwOrKqPbT71674100512_1674100529-1.png)
CSSファイルは、こんな感じです。
ぜひみなさんも、アニメーション生成ツールを活用して、Webサイトを華やかにしてみてはいかがでしょうか?(お疲れ様です☕)
![](https://osakanav.com/wp-content/uploads/2023/01/R9De6HBfFGFcE4e1674100566_1674100586-1.png)
↓実際に作成したものがこちら
![](https://osakanav.com/wp-content/uploads/2023/01/animation-green.gif)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
ホタルの光〜窓のゆき〜〜〜♪
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
これはホタルじゃないわ!笑
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2023/01/joshwcomeau-top-160x90.png)
↓シナリオ制作に携わった動画