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

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

成し遂げる

この効果は CSS を使用して完全に再現することは困難です。 CSS でシミュレートされた光の効果と影は比較的品質が低く、可能な限り復元しようとしているとしか言えません。

実際、各ライト セットは基本的に同じなので、ほぼ全体の効果を実現するには、そのうちの 1 つを実装するだけで済みます。

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

その核となるのは、実は角度グラデーション、つまり conic-gradient() です。角度グラデーションを使用すると、大まかに次のような効果を実現できます。

<div></div>
div {

    幅: 1000ピクセル;

    高さ: 600px;

    背景:

        円錐勾配(

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

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

            透明50%、

            透明)、

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

}

効果をご覧ください:

ちょっとそんな感じです。もちろん、よく見ると、グラデーション カラーは 1 つの色から透明に終わるのではなく、色 A -- 透明 -- 色 B となっていることがわかります。このようにすると、光源の残りの半分はそれほど急激にはなりません。変更された CSS コードは次のとおりです。

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

見た目を良くするために、角度グラデーションの最後に追加の色を追加しました。

えーと、ここでは、角度グラデーション conic-gradient() だけでは不十分で、光源の影の効果をシミュレートできないため、光源の影の効果を実現するには他のプロパティを使用する必要があることがわかります。

ここでは、当然ながらbox-shadowを思い浮かべます。複数のボックスシャドウを使用してネオンライトの効果を実現するトリックを紹介します。

光源の影を実現するために別の div を追加してみましょう。

<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);
} 

わかりました。光はありますが、問題は片側からの光しか必要ないということです。どうすればいいでしょうか?切り取る方法はたくさんあります。ここでは、clip-path を使用して要素の任意のスペースを切り取る方法を紹介します。

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

原則は次のとおりです。

このようにして、片側に光が当たります。

ここで、CSS には実際に片側影を実現する方法がありますが、実際の効果は良くないため、最終的に上記の解決策が採用されました。

次に、上記の片側光と角度グラデーションを配置、回転などによって重ね合わせると、次のような効果が得られます。

今ではかなり似ていますね。次に行うことは、パターン全体を動かすことです。ここには多くのテクニックがあります。中心となるのは、CSS @Property を使用して角度グラデーション アニメーションを実現し、ライト アニメーションと角度グラデーションを重ね合わせることです。

コードのグラデーションを変換するには、CSS @Property を使用する必要があります。コア コードは次のとおりです。

<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;
    }
}

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

このようなアニメーションを実現するための手順を確認しましょう。

  1. 基本的なフレームワークを作成するには、円錐グラデーションを使用します。ここでは、円錐グラデーションの背後に暗い背景がある複数のグラデーションも使用されています。
  2. 複数のボックスシャドウを使用して光と影の効果を実現する(ネオン効果とも呼ばれる)
  3. クリップパスを使用して要素の任意の領域をクリップする
  4. CSS @Property を使用してグラデーションアニメーション効果を実現する

残りの作業は、上記の手順を繰り返し、他のグラデーションと光源を追加し、アニメーションをデバッグすることです。最終的には、次のような簡単なシミュレーション効果が得られます。

元のエフェクトは .mp4 なので、正確な色と影のパラメータを取得することは不可能です。色はカラーパレットから直接取得し、影はよりカジュアルにシミュレートします。ソースファイルと正確なパラメータがあれば、シミュレーションはよりリアルになります。

完全なコードはここにあります: CodePen – iPhone 13 Pro Gradient

やっと

この記事は、どちらかと言うと楽しみのためのものです。実際には、上記の効果を生み出すにはもっと洗練されたソリューションがあるはずですし、CSS を使用してそれらをシミュレートするより良い方法もあるはずです。ここでは、いくつかのアイデアを紹介しています。プロセス内のテクニック 1、2、3、4 のいくつかは、学ぶ価値があります。

上記は、CSS グラデーションを使用して高度な背景ライトアニメーションを実現する方法の詳細です。CSS グラデーション背景アニメーションの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

<<:  Mysqlの同時パラメータ調整の詳細な説明

>>:  RHCEはApacheをインストールし、ブラウザでIPにアクセスします

推薦する

VirtualBox での CentOS 8.1 仮想マシンのインストールを最小限に抑える詳細なチュートリアル

1. 関連ツールと画像をダウンロードするダウンロードリンクバーチャルボックス: https://do...

Windows での MySQL 8.0.11 インストール チュートリアル

この記事は、WindowsでのMySQL 8.0.11のインストールチュートリアルを記録しています。...

TypeScript の Enum が問題となる理由

目次どうしたの?いつ使うか列挙の数を制御するビット値コントロールインデックス非数値列挙結論はType...

MySQL のデバッグと最適化に関する 101 のヒントを共有する

MySQL は強力なオープンソース データベースです。データベース駆動型アプリケーションの数が増える...

プロフェッショナルなMySQL開発設計仕様とSQL記述仕様

チーム開発のプロセスでは、プロジェクトの安定性、コードの効率性、管理の利便性のために、内部開発および...

Dockerコンテナを使用してプロキシ転送とデータバックアップを実装する方法

序文アプリケーションを Docker コンテナとしてサーバーにデプロイする場合、通常はネットワークと...

MySQLは文字列関数のSQL文をインターセプトします

1. left(name,4)は左の4文字をインターセプトしますリスト: SELECT LEFT(2...

Javascript と Vue を組み合わせて、あらゆる迷路画像の自動パス検索を実現します。

目次序文2次元配列、一方向基本インターフェースのマッピング幅優先、包括的検索マップ編集経路探索アルゴ...

MySQL で 2 つのテーブルをクエリする場合の from と join の違いの概要

序文MySQL では、複数テーブル結合クエリは非常に一般的な要件です。複数テーブルクエリを使用する場...

js の toString メソッドの 3 つの機能

目次1. toStringメソッドの3つの機能2. オブジェクトを表す文字列を返す3. カスタム t...

MySQL 8.0 における非同期レプリケーションの 3 つの方法について簡単に説明します。

この実験では、空のデータベース、オフライン、オンラインの 3 つのモードで、1 つのマスターと 2 ...

MySQL シリーズ 4 SQL 構文

目次チュートリアルシリーズ1. SQL言語の紹介と仕様2. データベース操作1. ライブラリを作成す...

Dockerイメージのエクスポートとインポート操作

基本イメージが以前に構成されていて、これらのイメージが他の場所でも必要な場合はどうなりますか?回答:...

MySQL Community Server 8.0.11 のインストールと設定方法のグラフィックチュートリアル

最近、MySQL を始めとしてデータベースの知識を勉強し始めました。以下では、皆さんの参考になるよう...

Rails APIを使用してReactアプリケーションを構築するための詳細な手順

目次バックエンド: Rails API部分フロントエンド: React部分Reactコンポーネントa...