時間経過とともに背景色を変える方法【STUDIO】

背景の作成

ボックスツールを使用して、背景を作成します。
･横幅：100%　縦幅：1flex

CSSの設定

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

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

@keyframes bgchange{
      0%   {background:#1542EB;}/*変化させたい色*/
      25%  {background:#15EB35;}/*変化させたい色*/
      50%  {background:#EB1547;}/*変化させたい色*/
      75%  {background:#EBB315;}/*変化させたい色*/
      90%  {background:#963F53;}/*変化させたい色*/
      100% {background:#3F486B;}/*変化させたい色*/
 }
</style>

IDの設定

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

Yasuo Kishioka

Web Designer

TwitterInstagramYouTube