背景色が時間変化 | 動くWebデザインアイディア帳

背景の動き
-背景色が時間変化-

デモページを見る

See the Pen 5-1 背景色が時間変化 by 動くWebデザインアイディア帳 (@ugokuweb)on CodePen.

「Result」内の表示を確かめてね！

動きを実現する仕組み

HTML内の<body>タグに対し、CSSのアニメーションを使い、変化させたい色や変化の時間を設定し動作を繰り返す。

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-1.css">
</head>

bodyに対してCSSを適応します。
```
<body></body>
```

自作のCSS内の書き方

body{
	animation: bgchange 20s ease infinite;/*変化の時間を変更したい場合は20sの部分を好きな時間に変更*/
}

@keyframes bgchange{
      0%   {background:#ffe6e1;}/*変化させたい色*/
      25%  {background:#fdcb9e;}/*変化させたい色*/
      50%  {background:#fdcbc1;}/*変化させたい色*/
      75%  {background:#ffff8c;}/*変化させたい色*/
      90%  {background:#b2dffb;}/*変化させたい色*/
      100% {background:#ffe6e1;}/*変化させたい色*/
 }