【CSS】アニメーション背景を生成できるサイトとは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「Animated CSS Background Generator」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・ふわふわ漂う泡のようなアニメーションを作りたい方
・おしゃれなCSSアニメーションを生成したい方
・円形、四角形など図形を動かしたい方

「Animated CSS Background Generator」って何?

Animated CSS Background Generator」とは、(@wweb_dev)さんが開発した「ゆっくり動くCSSアニメーション」が生成できるサイトのことです。マウス操作で動きのあるコードを生成。コピペで、すぐに実装できます!(おしゃれ✨)

Animated CSS Background Generator
With this tool you can quickly create and customize animated CSS backgrounds for your website. It includes a total of three different pure CSS animated backgrou...
【無料】24時間ネット予約受付システム【EDISONE】とは?
みなさんこんにちは!おさかなです!今回は「EDISONE」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・無料で使えるWeb予約システムを探している方・マウスのみで、簡単に予約システムを導...

実際に使ってみよう!

それでは早速サイトにアクセスしましょう!

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

アニメーションをカスタマイズしよう!

左のメニューから、カスタマイズが可能。

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

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

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

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

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

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

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

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

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

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

【CSS】FlexBoxの使い方が学べるサイト【FLEXBOX FROGGY】とは?
みなさんこんにちは!おさかなです!今回は「FLEXBOX FROGGY」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・FlexBoxをマスターしたい方・Webサイト作成・Webデザインに...

(ひと休み💤)

コードを確認しよう!

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

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

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

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

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

Bitly
おさかな
おさかな

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

ナビまる
ナビまる

これはホタルじゃないわ!笑

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

【CSS】影ジェネレーター【Shadow Palette Generator】とは?
みなさんこんにちは!おさかなです!今回は「Shadow Palette Generator」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・マウス操作でCSSの影を生成したい方・影ジェネレ...

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

おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はライターとして活動中。IT技術、サブカルチャーから、シナリオまで色々書きます。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました