CSSのみで実現する背景グラデーションは既に世の中に知れ渡っていて作成ツールまでありますが、その色が次々と変化させることもできます。
CSS詳しい方なら想像できると思いますが、グラデーションにアニメーションをミックスします。
CSSの書き方
以前からリスペクトしているWebクリエイターボックスさんのサイトがすごく参考になります。
ソースコードも付いていますので、とてもわかりやすと思います。
CodePenを拝借。
See the Pen
Colourful gradient animation by Mana (@manabox)
on CodePen.
サンプル
実際に4月1日の記事で利用しているサンプルがありますのでご覧ください。
作成ツール
参考サイトにも紹介されていた、こちらのサイトで簡単に作成できます。
背景にしたい色と、角度、それから変更スピードを選択するだけで作成できます。
グラデーションの背景に画像を入れたり、透過も駆使することで、あなたのサイトをもっとカッコイイ背景に変更しましょう！
- Original:https://minory.org/css-gradient-animation.html
- Source:Minory
- Author:管理者
Amazonベストセラー
Now loading...