【CodePen】バックグラウンド(背景)アニメーションのアイデア20選

バブルがランダムに上スクロールするアニメーション

See the Pen Background Animation Test 1.5 by Michael Prewitt (@mprewitt) on CodePen.

ドットがランダムに散らばるパーティクルエフェクト

See the Pen Volcanic ash by Dmitri Kolytchev (@Fata-ku) on CodePen.

ドットが水平にスクロールするパーティクルエフェクト

See the Pen Dynamic Particles Background Animation by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.

ドットが揺らめくノスタルジックなパーティクルエフェクト

See the Pen Pure CSS Particle Animation by Takeshi Kano (@tonkotsuboy) on CodePen.

SVGのグラデーションのアニメーション

See the Pen SVG Animation Background by Yoshiyuki ITO (@thanks2music) on CodePen.

カラフルな流体の背景アニメーション

See the Pen 2kb total size SVG animation by Ksenia Kondrashova (@ksenia-k) on CodePen.

グラデーションとブラーを使用した背景アニメーション

See the Pen Floating Color Orbs by Alison Quaglia (@hylobates-lar) on CodePen.

中心から広がるスクエアの背景アニメーション

See the Pen background animation by yuanchuan (@yuanchuan) on CodePen.

機械的にアニメーションするパターンアニメーション

See the Pen No-divs background pattern animation by Amit Sheen (@amit_sheen) on CodePen.

左右に無限スクロールするパターンアニメーション

See the Pen Infinite svg pattern animation by John Muir (@john_r_muir) on CodePen.

CSSで作られたドットが移動するパターンアニメーション

See the Pen CSS only Pattern Animation by Temani Afif (@t_afif) on CodePen.

レトロ感のあるパターンアニメーション

See the Pen Pattern animation by Comehope (@comehope) on CodePen.

雨の表現をした背景アニメーション

See the Pen CSS Rain Animation by Roman (@termyanen) on CodePen.

雨の波紋を表現した背景アニメーション

See the Pen Rain Drops – #089 of #100Days100Projects by Florin Pop (@FlorinPop17) on CodePen.

縦ラインにライトが強調される背景アニメーション

See the Pen CSS Background Effect by Osorina Irina (@osorina) on CodePen.

宇宙空間を移動するような背景アニメーション

See the Pen Starfield by Brett (@PhantomImage) on CodePen.

宇宙空間を移動するような背景アニメーション

See the Pen Space Travel – Canvas by Adrien Gautier (@adrgautier) on CodePen.

マトリックスをイメージさせる背景アニメーション

See the Pen Matrix animation using html5 canvas by Clayton (@cpiscopo) on CodePen.

ノイズアニメーション

See the Pen Static by Zach Green (@zgreen) on CodePen.

雲と星のリアルな表現のアニメーション

See the Pen pure CSS twinkling stars background by Anastasia Goodwin (@agoodwin) on CodePen.

CodePenは、HTML、CSS、JavaScriptを使ってウェブページのプロトタイプや実装を行うことができるオンラインの開発環境です。

CodePenでは、ウェブ開発者やデザイナーが、ブラウザ上でコードを書きながら、すばやく試行錯誤することができます。ユーザーは自分のプロジェクトを公開し、他のユーザーによるフィードバックを受けたり、共有することもできます。

CodePenには、エディター機能が搭載されており、HTML、CSS、JavaScriptのコードを入力することができます。また、ユーザーが公開したプロジェクトは、フロントエンドの技術を利用して動的な表現やアニメーションを作ることができます。