純粋な CSS3 で蝶が羽ばたく様子を再現する例

純粋な CSS3 で蝶が羽ばたく様子を再現する例

純粋なCSS3で蝶が羽ばたく様子を再現。まずはその効果をご覧ください

どうですか?効果はかなりいいですよね?

上記のコード:

html

<div id="蝶">
    <div class="leftSide"></div>
    <div class="body"></div>
    <div class="rightSide"></div>
</div>

CS

体{
            背景: url("./images/bg.jpg") 繰り返しなし;
        }
        #蝶{
            幅: 600ピクセル;
            高さ: 500px;
            位置: 相対的;
            変換: スケール(0.35);
            変換スタイル: 3D を保持します。
        }
        .leftSide{
            幅: 267ピクセル;
            高さ: 421px;
            背景: url("./images/leftSide.png") 繰り返しなし;
            位置: 絶対;
            左: 26px;
            上: 40px;
            アニメーション: 左 2 秒無限;
            zインデックス: 9999;
        }
        @keyframes 左 {
            0%{
                変換: rotateY(0deg);
                変換の原点: 右中央;
                パースペクティブ: 201px;

            }
            50%{
                変換: rotateY(70deg);
                変換の原点: 右中央;
                パースペクティブ: 201px;

            }
            100%{
                変換: rotateY(0deg);
                変換の原点: 右中央;
                パースペクティブ: 201px;
            }
        }
        @keyframes 右 {
            0%{
                変換: rotateY(0);
                変換の原点: 左中央;
                パースペクティブ: 201px;

            }
            50%{
                変換: rotateY(-70deg);
                変換の原点: 左中央;
                パースペクティブ: 201px;

            }
            100%{
                変換: rotateY(0);
                変換の原点: 左中央;
                パースペクティブ: 201px;

            }
        }
        。体{
            幅: 152ピクセル;
            高さ: 328px;
            背景: url("./images/body.png") 繰り返しなし;
            位置: 絶対;
            マージン: 自動;
            左: 0;
            右: 0;
            下部: 0;
            上: 0;
            zインデックス: 9999;
        }
        .rightSide{
            幅: 284ピクセル;
            高さ: 460ピクセル;
            背景: url("./images/rightSide.png") 繰り返しなし;
            位置: 絶対;
            右: 26px;
            上: 58px;
            アニメーション: 右 2 秒無限;
            zインデックス: 9999;
        }

その前に、いくつかの CSS プロパティを紹介します。

@キーフレーム

  1. @keyframesルールを使用すると、アニメーションを作成できます
  2. アニメーションを作成する原則は、1 つの CSS スタイル セットを別のスタイル セットに徐々に変更することです。
  3. 変更が発生する時間をパーセンテージで指定するか、または 0% と 100% に相当するキーワード「from」と「to」を使用します。
  4. 0%はアニメーションの開始時間、100%はアニメーションの終了時間です

変換: rotateY()

  1. transform プロパティは、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、傾斜させることができます。
  2. rotateY() は、Y 軸に沿った 3D 回転を定義します。

この図は、xyz 軸を明確に示しています。実際、3DS MAX などの 3D モデリング ソフトウェアを学習した学生は、これら 3 つの軸の方向をよりよく理解しているはずです。

実装のアイデア: まず、子と父を使用して、左翼、右翼、およびボディを絶対位置に配置し、それらを組み合わせます。次に、transform の rotateY を使用して、y 軸に沿って回転させます。ここで回転に @keyframe アニメーションを使用し、アクションを繰り返します。

transform-style: preserve-3d; プロパティにも注目する必要があります。W3C によれば、これにより、変換された子要素が 3D 変換を保持できるようになります。つまり、すべてのサブ要素は 3D 空間に表示されます。逆に、フラットに設定すると、すべてのサブ要素は 2D 空間に表示されます。

デモのダウンロードアドレス

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQL 8.0.23 メジャーアップデート (新機能)

>>:  Javascriptの基本を詳しく説明

推薦する

LinuxシステムでFuserコマンドを使用する方法

Fuser コマンドとは何ですか? fuser コマンドは、特定のファイル、ディレクトリ、またはソケ...

JS でオブジェクトを作成する 4 つの方法

目次1. リテラル値でオブジェクトを作成する2. 新しいキャラクターを使ってオブジェクトを作成する3...

js で 0ms 遅延タイマーを実装するいくつかの方法

目次キューマイクロタスク非同期/待機メッセージチャネルやっと付録ここ二日間、「タイムリーな setT...

CSSがページのレンダリングをブロックするかどうかについての簡単な説明

おそらく誰もが js の実行によって DOM ツリーの解析とレンダリングがブロックされることを知って...

Dockerでコンテナを作成するときのディレクトリ権限

昨日プロジェクトを書いていた時に、MySQL の派生版である Percona を使う必要があったので...

MySQL の一般的な SQL ステートメントの概要

1. mysqlエクスポートファイル: SELECT `pe2e_user_to_company`....

JSはスネークゲームを実装する

目次1. 初期化構造2. 蛇の色のレンダリング3. ヘビの動き4. ヘビの死を判定する方法 ヘビの死...

Firefox で英語の文字が折り返されない問題の解決方法

テキストのレイアウトには、言語に応じていくつかの書式設定要件があります。たとえば、簡体字中国語では、...

IDEA で mysql8.0.3 と mybatis-generator を使用する際に発生するバグ

1. プラグインを追加し、pomファイルの下に次の設定を追加します。 <!-- mybatis...

jsイベント委譲の詳細な説明

1. 各関数はオブジェクトであり、メモリを占有します。メモリ内のオブジェクトが増えるほど、パフォーマ...

Vueの自己ネストツリーコンポーネントの使い方の詳細な説明

この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...

Ubuntu の Python で C/C++ メソッドを呼び出すダイナミック リンク ライブラリの詳細な説明

ブーストをインストールPython から C/C++ を呼び出す方法はたくさんあります。この記事では...

クエリプロファイラを使用して MySQL ステートメントの実行時間を表示する方法

前回の記事では、MySQL ステートメントの実行時間をチェックする 2 つの方法を紹介しました。今日...

フロントエンドパフォーマンス最適化に関する補足記事

序文私は、Web サイトのフロントエンド パフォーマンス最適化のための JavaScript と C...

JavaScript ESの新機能letとconstキーワードに基づく

目次1. letキーワード1.1 基本的な使い方1.2 変動昇進はない1.3 一時的なデッドゾーン1...