CSSはグラデーションを巧みに利用して高度な背景光アニメーションを実現します

<div></div>

div {

    幅: 1000ピクセル;

    高さ: 600px;

    背景：

        円錐勾配(

            -45度から400ピクセル300ピクセル、

            hsla(170度, 100%, 70%, .7),

            透明50%、

            透明）、

            線形グラデーション(-45度、#060d5e、#002268);

}

div {
    幅: 1000ピクセル;
    高さ: 600px;
    背景：
        円錐勾配(
            -45度から400ピクセル300ピクセル、
            hsla(170度, 100%, 70%, .7),
            透明50%、
            hsla(219度、90%、80%、.5) 100%)、
            線形グラデーション(-45度、#060d5e、#002268);
}

<div class="shadow"></div>

。影 {
    幅: 200ピクセル;
    高さ: 200px;
    背景: #fff;
    ボックスシャドウ: 
        0px 0.5px hsla(170度, 95%, 80%, 1),
        0px 0 1px hsla(170度, 91%, 80%, .95),
        0px 0 2px hsla(171度, 91%, 80%, .95),
        0px 0 3px hsla(171度, 91%, 80%, .95),
        0px 0 4px hsla(171度, 91%, 82%, .9),
        0px 0 5px hsla(172度, 91%, 82%, .9),
        0px 0 10px hsla(173度, 91%, 84%, .9),
        0px 0 20px hsla(174度, 91%, 86%, .85),
        0px 0 40px hsla(175度, 91%, 86%, .85),
        0px 0 60px hsla(175度, 91%, 86%, .85);
} 

。影 {
    幅: 200ピクセル;
    高さ: 200px;
    背景: #fff;
    ボックスシャドウ: .....;
    クリップパス: ポリゴン(-100% 100%、200% 100%、200% 500%、-100% 500%);
}

<div class="wrap">
    <div class="shadow"></div>
</div>

@property --xPoint {
  構文: '<長さ>';
  継承: false;
  初期値: 400px;
}
@property --yポイント {
  構文: '<長さ>';
  継承: false;
  初期値: 300px;
}

。包む {
    位置: 相対的;
    マージン: 自動;
    幅: 1000ピクセル;
    高さ: 600px;
    背景：
        円錐勾配(
            -45度からvar(--xPoint) var(--yPoint)、
            hsla(170度, 100%, 70%, .7),
            透明50%、
            hsla(219度、90%、80%、.5) 100%)、
            線形グラデーション(-45度、#060d5e、#002268);
    アニメーション: pointMove 2.5 秒無限交互線形;
}

。影 {
    位置: 絶対;
    上: -300px;
    左: -330px;
    幅: 430ピクセル;
    高さ: 300px;
    背景: #fff;
    変換の原点: 100% 100%;
    変換: 回転(225度);
    クリップパス: ポリゴン(-100% 100%、200% 100%、200% 500%、-100% 500%);
    box-shadow: ...ここでは多くのシャドウコードが省略されています。
    アニメーション: スケール 2.5 秒 無限 交互 線形;
}
 
@keyframesスケール{
    50%、
    100% {
        変換: 回転(225度) スケール(0);
    }
}

@keyframes ポイント移動 {
    100% {
        --xポイント: 100px;
        --yポイント: 0;
    }
}