CSS

HTMLの書き方

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

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

bodyに対してCSSを適応します。
 

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%;
	}
}

HTMLの書き方

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

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

bodyに対してCSSを適応します。
 

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;
	}/*変化させたい色*/

}