純粋な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 プロパティを紹介します。 @キーフレーム
変換: rotateY()
この図は、xyz 軸を明確に示しています。実際、3DS MAX などの 3D モデリング ソフトウェアを学習した学生は、これら 3 つの軸の方向をよりよく理解しているはずです。 実装のアイデア: まず、子と父を使用して、左翼、右翼、およびボディを絶対位置に配置し、それらを組み合わせます。次に、transform の rotateY を使用して、y 軸に沿って回転させます。ここで回転に @keyframe アニメーションを使用し、アクションを繰り返します。 transform-style: preserve-3d; プロパティにも注目する必要があります。W3C によれば、これにより、変換された子要素が 3D 変換を保持できるようになります。つまり、すべてのサブ要素は 3D 空間に表示されます。逆に、フラットに設定すると、すべてのサブ要素は 2D 空間に表示されます。 デモのダウンロードアドレス 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: MySQL 8.0.23 メジャーアップデート (新機能)
Fuser コマンドとは何ですか? fuser コマンドは、特定のファイル、ディレクトリ、またはソケ...
目次1. リテラル値でオブジェクトを作成する2. 新しいキャラクターを使ってオブジェクトを作成する3...
目次キューマイクロタスク非同期/待機メッセージチャネルやっと付録ここ二日間、「タイムリーな setT...
おそらく誰もが js の実行によって DOM ツリーの解析とレンダリングがブロックされることを知って...
昨日プロジェクトを書いていた時に、MySQL の派生版である Percona を使う必要があったので...
1. mysqlエクスポートファイル: SELECT `pe2e_user_to_company`....
目次1. 初期化構造2. 蛇の色のレンダリング3. ヘビの動き4. ヘビの死を判定する方法 ヘビの死...
テキストのレイアウトには、言語に応じていくつかの書式設定要件があります。たとえば、簡体字中国語では、...
1. プラグインを追加し、pomファイルの下に次の設定を追加します。 <!-- mybatis...
1. 各関数はオブジェクトであり、メモリを占有します。メモリ内のオブジェクトが増えるほど、パフォーマ...
この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...
ブーストをインストールPython から C/C++ を呼び出す方法はたくさんあります。この記事では...
前回の記事では、MySQL ステートメントの実行時間をチェックする 2 つの方法を紹介しました。今日...
序文私は、Web サイトのフロントエンド パフォーマンス最適化のための JavaScript と C...
目次1. letキーワード1.1 基本的な使い方1.2 変動昇進はない1.3 一時的なデッドゾーン1...