BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】CSSのトリッキーなグラデーションで高度な背景光アニメーションの感覚を実現

2022-01-21 02:55:10

実装する

この効果をCSSで正確に再現するのは難しく、CSSでの光の影のシミュレーションは比較的少ないので、再現を試みるしかない。

各照明セットは基本的に同じものなので、どれか1つを実装するだけでほぼ全ての効果を得ることができます。

この効果を観察してください。

その核心は、まさに円錐グラデーション()であり、これを使うと、おおよそ次のような効果を得ることができます。 

<div></div>


div {

    width: 1000px;

    height: 600px;

    background:

        conic-gradient(

            from -45deg at 400px 300px,

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

            transparent 50%,

            transparent),

            linear-gradient(-45deg, #060d5e, #002268);

}

<スパン 効果を見てください。

それはちょっと楽しみですね。もちろん、よく見るとグラデーションは1色→透明で終わるのではなく、色A -- 透明 -- 色Bで、光源の残り半分がそれほど硬くならないように、修正したCSSコードになっているんですよ。 

div {
    width: 1000px;
    height: 600px;
    background:
        conic-gradient(
            from -45deg at 400px 300px,
            hsla(170deg, 100%, 70%, .7),
            transparent 50%,
            hsla(219deg, 90%, 80%, .5) 100%),
            linear-gradient(-45deg, #060d5e, #002268);
}

コーナーグラデーションの端に色を追加して、見栄えをよくしています。

ここで、角度グラデーションのconic-gradient()だけでは、光の影の効果をシミュレートするには不十分なので、他のプロパティを使って光の影の効果を実現しなければならないことがわかります。

ここで、自然とボックスシャドウを思い浮かべますが、複数のボックスシャドウを使ってネオンライト効果を実現するトリックを紹介します。

ライトシャドウを実装するdivを通しで追加してみましょう。 

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


.shadow {
    width: 200px;
    height: 200px;
    background: #fff;
    box-shadow: 
        0px 0 .5px hsla(170deg, 95%, 80%, 1),
        0px 0 1px hsla(170deg, 91%, 80%, .95),
        0px 0 2px hsla(171deg, 91%, 80%, .95),
        0px 0 3px hsla(171deg, 91%, 80%, .95),
        0px 0 4px hsla(171deg, 91%, 82%, .9),
        0px 0 5px hsla(172deg, 91%, 82%, .9),
        0px 0 10px hsla(173deg, 91%, 84%, .9),
        0px 0 20px hsla(174deg, 91%, 86%, .85),
        0px 0 40px hsla(175deg, 91%, 86%, .85),
        0px 0 60px hsla(175deg, 91%, 86%, .85);
}

さて、光はあるのですが、問題は片側だけ光らせればいいということです。切り抜きにはいろいろな方法がありますが、ここではclip-pathを使って要素上の任意のスペースを切り抜く方法を紹介します。 

.shadow {
    width: 200px;
    height: 200px;
    background: #fff;
    box-shadow: ..... ;
    clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
}

原理はこうだ。

このように、光の片面：を得ることができます。

ここで、実はCSSで片側だけの影を実現する方法もあるのですが、実際にはうまくいかないので、結局、上記のような解決策になりました。

次に、位置合わせや回転などを使って、上の1つのサイドライトと角度のあるグラデーションを重ねると、次のようなものが出来上がります。

この時点で、すでにかなり似ていますね。次にやることは、パターン全体を、動かすことです。いろいろな仕掛けがありますが、CSSの@Propertyを使ってコーナーフェードをアニメーションさせることと、ライトのアニメーションをコーナーフェードに重ねることが核心です。

CSS @Propertyを使ってコードのフェードを変形させる必要があるのですが、そのコアとなるコードは以下の通りです。 

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


@property --xPoint {
  syntax: '<length>';
  inherits: false;
  initial-value: 400px;
}
@property --yPoint {
  syntax: '<length>';
  inherits: false;
  initial-value: 300px;
}

.wrap {
    position: relative;
    margin: auto;
    width: 1000px;
    height: 600px;
    background:
        conic-gradient(
            from -45deg at var(--xPoint) var(--yPoint),
            hsla(170deg, 100%, 70%, .7),
            transparent 50%,
            hsla(219deg, 90%, 80%, .5) 100%),
            linear-gradient(-45deg, #060d5e, #002268);
    animation: pointMove 2.5s infinite alternate linear;
}

.shadow {
    position: absolute;
    top: -300px;
    left: -330px;
    width: 430px;
    height: 300px;
    background: #fff;
    transform-origin: 100% 100%;
    transform: rotate(225deg);
    clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
    box-shadow: ... This omits a lot of shadow code;
    animation: scale 2.5s infinite alternate linear;
}
 
@keyframes scale {
    50%,
    100% {
        transform: rotate(225deg) scale(0);
    }
}

@keyframes pointMove {
    100% {
        --xPoint: 100px;
        --yPoint: 0;
    }
}

こうして、ライトの完全なアニメーションが実現しました。

このようなアニメーションを実現するためのステップをリフレッシュしてみましょう。

  1. 基本的なフレームは、角型グラデーションの円錐型グラデーションを使用して構築されており、ここでも複数のグラデーションが使用されており、角型グラデーションの後ろに暗い背景色が使用されています。
  2. 複数のボックスシャドウを使用して、光と影の効果を実現する（ネオン効果とも呼ばれる）
  3. clip-pathを使用して、要素の任意の領域を切り取ることができます。
  4. CSSの@Propertyでグラデーションをアニメーション化する

あとは、上記の手順を繰り返し、他のグラデーションや光源を追加し、アニメーションをデバッグして、ようやく以下のような簡単なシミュレーションができるようになりました。

元のエフェクトが.mp4なので、色をスウォッチから直接取って、影をよりランダムにシミュレーションしているところ、正確なパラメータを持つソースファイルがあれば、よりリアルにシミュレーションできるのですが、正確な色とパラメータを得ることができません。

<スパン 全コードはこちらをご覧ください。 CodePen -- iPhone 13 Pro グラデーション

<スパン 最後に

この記事はどちらかというと楽しむためのもので、実際には上記の効果に対してもっとエレガントな解決策があるのは間違いありませんし、CSSエミュレーションの使い方にももっと良い方法があるはずなので、それを投げかけてみただけです。

上記は、背景光のアニメーションの高度な感覚を達成するためにCSSフェードの詳細であり、CSSフェード背景アニメーションについての詳細は、スクリプトの家の他の関連記事に注意を払うしてください！[OK]をクリックします。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します