グラデーションが時間変化 | 動くWebデザインアイディア帳

背景の動き
-グラデーションが時間変化-

デモページを見る

See the Pen 5-2 グラデーションが時間変化 by 動くWebデザインアイディア帳 (@ugokuweb)on CodePen.

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

動きを実現する仕組み

HTML内の<body>タグに対し、CSSのアニメーションを使い大きなグラデーション背景を描画し、位置をずらして変化をつける。

HTMLの書き方

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

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

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

自作のCSS内の書き方

/*========= body背景色の変化CSS ===============*/

body {
	width: 100%;
	height: 100vh;
	background:linear-gradient(45deg, #3bade3,#9844b7,#44ea76);/*グラデーションを定義*/
	background-size: 200% 200%;/*サイズを大きくひきのばす*/
	animation: bggradient 20s ease infinite;
}

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