Rodhos Soft

備忘録を兼ねた技術的なメモです。Rofhos SoftではiOSアプリ開発を中心としてAndroid, Webサービス等の開発を承っております。まずはご相談下さい。

グラデーション

html

こちらのやり方にしたがってやってみた。

ics.media


しかし値の調節にこつがいるのかもしれない。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		body {
		}
		#bg {
      position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			/* 背景グラデーションの作成 */
			background: linear-gradient(to bottom,
			hsl(110, 80%, 40%), /*　色相80(360度中) 彩度 80% 輝度 40%*/
			hsl(170, 80%, 60%), /* 色相140 */
			hsl(230, 80%, 40%)); /* 色相200 */
			background-size: 400% 400%; /* 画面からはみ出させることで変化をみせてる */
      animation: AnimationName 10s ease infinite;
		}
		@keyframes AnimationName {
			0% { background-position: 50% 0% }
			50% { background-position: 50% 100%	}
			100% { background-position: 50% 0% }
		}
	</style>
</head>
<body>
<div id = "bg"></div>
</body>
</html>