CSSのスニペットに登録!背景にCSSグラデーションが変化するアニメーションを実装するスタイルシート

スクリーンいっぱいの背景にCSSグラデーションが変化するアニメーションを実装するスタイルシートを紹介します。
HTMLもCSSも非常にシンプルで、簡単に利用できます。

サイトのキャプチャ

Pure CSS3 Gradient Background Animation


上記はGIFアニメですこし汚いので、実際の動作は下記のデモページでご覧ください。
15秒周期に設定されており、時間やグラーデションのカラーは自由に変更できます。

See the Pen Pure CSS3 Gradient Background Animation by Manuel Pinto (@P1N2O) on CodePen.

HTML

HTMLは非常にシンプルです。
デモではh1要素ですが、他の要素を配置することもできます。

CSS

「linear-gradient(-45deg)」で背景に斜めのグラデーションを指定し、キーフレームを使用してグラデーションをアニメーションさせます。シンプルなコードなので、汎用性にも優れていると思います。
写真やイラストを使って、グラデーションをオーバーレイさせてもいいですね。

sponsors

top of page

©2024 coliss