こんにちは!ラクです。
先日、急に背景が常に変わり続けるプログラムのアイデアが降りてきたので、この記事で共有しようと思います!
簡単で、かつオシャレな背景が作れるので読んでくれると嬉しいです!!
目次
オシャレな背景の作り方
では、まず完成形をみてください。
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秒間のアニメーションの間のどのタイミングで色を変えるかを指定しているだけです。
変化する色や秒数は自分好みにアレンジしてみてください♪