【CSS】背景に入れたグラデーションが動く

【CSS】背景に入れたグラデーションが動く

背景に写真や色、時にはグラデーションを入れたりしますよね。
今回は背景に入れたグラデーションが動くCSSをご紹介します。

CSSの書き方

CSS
body{
  background: linear-gradient(-45deg, #ffe9e9, #fffceb, #e0ffde, #def7ff, #dfd7ff, #faeaf5);
  background-size: 500% 500%;
  animation: bgAnime 8s linear infinite;
}

@keyframes bgAnime { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

解説

背景のグラデーションを500%にして、効果は「linear」で一定にしています。
8秒で無限ループにしています。
この辺りは好みで変更してください。

実装

See the Pen
背景色のグラデーションが動くCSS by Uchaaan (@Uchaaan)
on CodePen.

いかがでしょうか。
グラデーション背景とかキレイですよね。
是非使ってみてください。

他にもあるよ。関連記事

人気記事

人気記事

最新記事

ブログカテゴリー

タグ

プロフィール

プロフィール画像

猫田 ねこ

パチンコ店勤務からweb制作会社へ転職という異色の経歴。漫画大好き。アニメ大好き。パチンコ大好きな、ねこです。

利用規約　 お問い合わせ

ページトップへ