アクティビティページでの CSS3 アニメーション効果の適用

アクティビティページでの CSS3 アニメーション効果の適用

背景

あっという間に忙しい一年が終わり、毎年恒例のイベントの時期がやってきます。お祭り気分を演出するには、イベントページでのダイナミックな演出が欠かせません。

まず、効果画像:

1. 全体分析

写真から、主な動的効果は動的なインジケーター矢印と降り注ぐ雪の効果であることがわかります。画像のサイズが3Mを超えているため、サーバーとユーザーエクスペリエンスにとって大惨事となるため、怠けてこの効果画像を直接背景として使用することはお勧めできません。アクティブなページであるため、訪問回数は当然避けられません。同時実行性が高い状況では、サーバーが圧倒されるのは当然であり、ユーザーのトラフィックとユーザーが応答を待つ時間にも申し訳なく思います。完璧を目指す人として、プログラムで実現できる効果には断固としてGIFを使用せず、できるだけ多くのリソースを節約することを原則としています。

2. ダイナミックインジケーター矢印

プログラム実装の観点から、まず最初に行う必要があるのは、変更点をカプセル化し、変更を定数から分離することです。図の 5 つのレベルは、一般的に同じです。各レベルにはベースと矢印があります。レベルがカプセル化された後、データを使用して各レベルの位置を駆動し、矢印で方向を示します。

関連データは次のとおりです。

[
    {
        状態: 0,
        左: 9,
        トップ: -2,
        方向: { rotateZ: 290、色: "#d26754" }
    },
    {
        状態: 0,
        左: 66,
        トップ: 10,
        方向: { rotateZ: 24、色: "#f58351" }
    },
    {
        状態: 0,
        左: 18、
        トップ: 20,
        方向: { rotateZ: 30、色: "#f78351" }
    },
    {
        状態: 0,
        左: -2、
        上: 36.5、
        方向: { rotateZ: 295、色: "#e19d47" }
    },
    {
        状態: 0,
        左: 52、
        上: 49.5、
        方向: { rotateZ: 293、色: "#e19d47" }
    }
]

1. 動的効果分析

レンダリングを注意深く観察すると、全体的な効果は 3D パースペクティブであることがわかります。パースペクティブは、垂直に見下ろすのではなく、45 度の角度で見下ろすものです。最初に思い浮かぶのは、強力な CSS3 3D 回転です。矢印効果は、ランニング トラック + 矢印ランニング効果に分けられます。この方法では、トラックの 3D パースペクティブを作成し、外側のトラックに沿って矢印の動きを繰り返すだけです。

2. 具体的な実施

<div class="item" flex="main:center cross:center"
:style="{left:item.left+'%',top:item.top+'%'}"
v-for="item in items" @click="showReceive(item)">
    <div class="bottom" flex="main:center cross:center">
        <div class="direction" flex="dir:top" :style="{transform:`rotateX(34deg) rotateY(0deg) rotateZ(${item.direction.rotateZ}deg)`}">
            <div class="half"></div>
            <div class="ハーフトラック">
                <div class="矢印"
                :style="{transform: `rotate(${item.direction.rotate}deg`,
                右:`${item.direction.right}px`,
                'border-color': `${item.direction.color} 透明 透明`
                }"></div>
            </div>
        </div>
    </div>
</div>
  。方向 {
    位置: 絶対;
    幅: 20px;
    高さ: 260%;
    。半分 {
      フレックス: 1;
    }
    。追跡 {
      位置: 相対的;
      //上マージン: 90px;
      上マージン: 2em;
      .矢印{
        位置: 絶対;
        幅: 0;
        高さ: 0;
        境界線: 10px 実線;
        border-color: 赤 透明 透明;
        アニメーション: dynamicArrow 3000ms 無限線形;
      }
    }
  }
/* // 動的矢印*/
@keyframes ダイナミック矢印 {
  0% {
    不透明度: 1;
    下部: 100%;
  }
  70% {
    不透明度: 1;
  }
  90% {
    不透明度: 0.1;
    下: -20px;
  }
  100% {
    不透明度: 0;
  }
}

3. 空一面に雪が降る

効果画像を注意深く観察すると、雪片の大きさ、移動速度、距離、色の明暗などが異なります。雪片の動きの全体的な方向は上から下、左から右で、非常に均等に降り注いでいます。

1. 実装のアイデア

雪片が舞うトラック + 雪片が舞う効果。トラックを一定の角度に傾けてから画面全体をタイル状に並べ、データを使用してトラック内の雪片の位置、レベル、サイズ、実行遅延、実行速度、各トラックの色深度を制御します。効果をより直感的に確認するには、トラックの背景色を以下のように設定します。

2. 具体的な実施

<div class="雪">
  <div class="s_track" :style="{transform:`rotate(45deg) translate(${snow.deviation}px,${-snow.deviation}px)`,'z-index':snow.zindex}" v-for="雪の中の雪">
      <img class="snow" src="/static/original/img/DoubleDenierActivies/cbp_snow.png" :style="{opacity:snow.opacity,animation: `dynamicSnow ${snow.speed}ms ${snow.delay}ms infinite linear`,width:snow.size*1.14+'px',height:snow.size+'px'}"/>
  </div>
</div>
.s_トラック{
  位置: 絶対;
  幅: 220%;
  // 高さ: 10px;
  上: -10px;
  変換の原点: 0 0 0;
  。雪 {
    可視性: 非表示;
    位置: 絶対;
    zインデックス: 2;
    アニメーション: dynamicSnow 2000ms 無限線形;
  }
}
/* //スノーフレーク*/
@keyframes ダイナミックスノー {
  0% {
    可視性: 可視;
    上: 0;
    左: 0;
    変換: 回転(0);
  }
  100% {
    可視性: 可視;
    上: 100%;
    左: 100%;
    変換: 回転(360度);
  }
}
雪 = [] とします。
  初期化カウント = 16;
(i = 0 とします; i < initCount; i++) {
  ユニット = i - 8 とします。
    速度 = i > 3 ? i % 3 : i,
    サイズ = 0;
  スピード++;
  (i % 5 == 0)の場合{
    サイズ = 10;
  } そうでない場合 (i % 8 == 0) {
    サイズ = 20;
  } それ以外 {
    サイズ = Math.random() * 10;
  }
  雪.push({
    偏差: unit * 40, //位置遅延: Math.random() * 1000, //遅延速度: speed * 3000, //速度不透明度: speed / 4,
    サイズ: サイズ、
    zindex: サイズ >= 10 ? 4 : 0
  });
}
snows2 = [] とします。
雪.forEach(f => {
  snows2.push({
    ...f、
    偏差: snows[parseInt(Math.random() * initCount)].偏差 - 10,
    遅延: f.delay + 1000 //遅延 });
});
snows3 = [] とします。
snows.forEach(f => {
  snows3.push({
    ...f、
    偏差: snows[parseInt(Math.random() * initCount)].偏差 - 20,
    遅延: f.delay + 2000 //遅延 });
});
snows = snows.concat(snows2);
snows = snows.concat(snows3);
snows.sort((a, b) => a.deviation - b.deviation);
this.snows = 雪が降る;

IV. 結論

フロントエンド開発者として、レンダリングを可能な限り復元する必要があります。復元の程度を追求しながら、パフォーマンスとユーザーエクスペリエンスも考慮して、ページを美しく、可能な限り軽量で簡潔にする必要があります。

上記は、エディターが紹介したアクティビティページでの CSS3 アニメーション効果の応用です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  MySQLデータベースに接続し、クエリ操作を実行するためのIDEAの完全なコード

>>:  nginx+lua を使用した単一マシンでの何万もの同時接続の実装

推薦する

MySQL でコミットされていないトランザクション情報を見つける方法

少し前に、「ORACLE でコミットされていないトランザクションの SQL ステートメントを見つける...

Windows 10 に MySQL 8.0.19 を zip 形式でインストールする詳細なチュートリアル

目次1.ダウンロード後、インストールしたいディレクトリに解凍します。 2. インストールディレクトリ...

CSS の clip-path プロパティの使用方法の詳細な説明

クリップパスの使用ポリゴン値は複数の座標点で構成されます。最初の値は x 方向、2 番目の値は y ...

Vue は Axios リクエスト フロントエンドのクロスドメイン問題をどのように解決するのか

目次序文1. クロスドメインの問題はなぜ発生するのでしょうか? 2. 解決策クロスオリジンリソース共...

DockerにMinIOをインストールするための詳細な手順

目次1. docker環境が正常かどうかを確認する2. miniIOイメージをダウンロードする3. ...

ReactとReduxの関係を詳しく説明

目次1. reduxとreactの関係2. Reactのマルチコンポーネント共有3. reduxの3...

MySQL truncate table ステートメントの使用

Truncate table ステートメントは、テーブル内のすべてのデータを削除/切り捨てるために使...

FlashFXP FTP クライアント ソフトウェア登録クラッキング方法

FlashFXPのダウンロードアドレスは、https://www.jb51.net/softs/95...

JS は Baidu 検索ボックスを実装します

この記事の例では、Baidu検索ボックスを実装するためのJSの具体的なコードを参考までに共有していま...

ドロップダウンボックス選択コンポーネントを実装するためのネイティブ js

この記事の例では、ドロップダウンボックス選択コンポーネントを実装するためのjsの具体的なコードを参考...

Bootstrap 3.0 学習ノートのボタンとドロップダウン メニュー

前回の記事はBootstrap CSS部分の簡単なレビューであり、多くの詳細が見落とされていました。...

Sysbench の MySQL ベンチマーク プロセスの分析

序文1.ベンチマークは、テスト オブジェクトのクラスの特定のパフォーマンス指標の定量的、再現可能、比...

React 合成イベントの説明

目次入力ボックスをクリックして開始します拡張機能入力ボックスをクリックすると複数のイベントが発生しま...

VMWare ネットワーク アダプタの 3 つのモードの実装プロセスの分析

3つのモードブリッジ(ブリッジ モード)、NAT(ネットワーク アドレス変換モード)、ホストオンリー...

DOCTYPEタイプの詳細な紹介

<br />通常、HTML では次の方法で DOCTYPE を宣言します。 <!D...