【CSS】色が変わり続けるオシャレな背景を作る！めっちゃ簡単です。

こんにちは！ラクです。

先日、急に背景が常に変わり続けるプログラムのアイデアが降りてきたので、この記事で共有しようと思います！

簡単で、かつオシャレな背景が作れるので読んでくれると嬉しいです！！

オシャレな背景の作り方

では、まず完成形をみてください。

See the Pen Awesome BackGround #1 by ラク (@raku_gurafiri) on CodePen.

こんな感じの背景です。

どうですか？なかなかオシャレでしょ？？

では、このコードのポイントを紹介します！

使っているのはanimationだけ！

body {
  animation: ColorChange 20s linear infinite alternate;
}

この一行のコードがこの背景の90％を作っていると言っても過言ではありませんw

ただ、少し難しいと思うので順に説明していきます。

	役割	解説
ColorChange	アニメーションの名前	任意の名前なのでなんでも良いです。
20s	アニメーションの長さ	今回は20秒で指定しています。
linear	アニメーションの緩急	linearは速さが変わらずアニメーションが進んでいきます。
infinite	アニメーションを繰り返す回数	数字でも指定できます。今回は無限に繰り返します。
alternate	どのようにアニメーションを繰り返すか	一回のアニメーションが終わった後、終わった地点から繰り返します。

こんな感じです。

「alternate」だけ解説が難しいので画像を作りました！

このように、alternateはアニメーションを繰り返す時に急に背景の色が変わってしまうことを防いでくれます！

Keyframes で色を変える

@keyframes ColorChange {
  0%{
    background: #ff7f7f;
  }
  20%{
    background: #bf7fff;
  }
  40%{
    background: #7fbfff;
  }
  60%{
    background: #7fffbf;
  }
  80%{
    background: #bfff7f;
  }
  100%{
    background: #ffbf7f;
  }
}

一見難しそうに見えますが、20秒間のアニメーションの間のどのタイミングで色を変えるかを指定しているだけです。

変化する色や秒数は自分好みにアレンジしてみてください♪