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

STUDIOでcssを使用して、時間経過とともにグラデーションの背景色を変化させる方法をご紹介します。

背景の作成

ボックスツールを使用して、背景を作成します。
･横幅：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>