時間経過とともにグラデーションの背景色を変える方法【STUDIO】

背景の作成

ボックスツールを使用して、背景を作成します。
･横幅：100%　縦幅：1flex
※css内でサイズ指定を行っているので、横幅と縦幅は任意のサイズで構いません。

CSSの設定

ボックスの項目から「Blank」を画面に配置します。
右側の設定画面を表示させ、埋め込みコードに以下のcssをコピー&ペーストします。
CSSでは、時間の設定と変化するグラデーションの色の設定の他、グラデーションを展開するサイズの指定を行えます。
設定後、ボックスは見える必要がないので最小限のサイズに変更し、色も透明にしておきましょう。

<style>
#bggradation {
	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%;
	}
}
</style>

IDの設定

背景用のボックスを選択した状態で右側の設定画面からIDの欄に「bggradation（任意）」と設定すれば完成です。

Yasuo Kishioka

Web Designer

Adobe／Flmora／Canva／STUDIOなどの情報をお伝えするブログです。