今日は折り紙飛行機(飛べる飛行機)を作ります 基本的にすべてCSSで実装されており、JSはごく一部に過ぎません。 まずは、航空機の構造を見てみましょう。 灰色の部分は折り畳み可能な部分です 白い部分が胴体です 三角形は境界線によって描かれ、さまざまな方法で移動および反転されて上記の図になります。 書き始める前に、もう 1 つ知識を追加しておきます。 色設定には RGBA を使用しません。 hsl() を使用します h: 色相 0-360 0 (または 360) は赤、120 は緑、240 は青を表します s : 彩度 0% -100% l : 明るさ 0% - 100% やる気が出る前にまず効果を見てみましょう: HTML: <!--子供の頃の紙飛行機--> <div class="飛行機"> <div class="フロントエンド表示フロント"> <!-- 幅と高さが調整可能なテキスト ボックス --> <div class="text-input" contenteditable = true></div> <div class="fly"> 飛ぶ </div> </div> <div class="バックアップ終了表示バックアップ"> <div class="left-plane"> <!--左上隅の折りたたみ領域--> <div class="left-top fold"></div> <!--左下隅の折りたたみ領域--> <div class="left-bottom fold"></div> <!--本文--> <div class="wing wing1"></div> <div class="wing wing2"></div> </div> <div class="右平面"> <!--右上隅の折りたたみ領域--> <div class="右上折り返し"></div> <!--右下隅の折りたたみ領域--> <div class="右下折り畳み"></div> <!--本文--> <div class="wing wing3"></div> <div class="wing wing4"></div> </div> </div> </div> css: 体{ 幅: 100%; 高さ: 680ピクセル; 背景色: #000; 背景繰り返し: 繰り返しなし; オーバーフロー: 非表示; 遷移: すべて 2 秒線形。 } /*親に被写界深度を追加*/ 。飛行機{ 幅: 100%; 高さ: 100%; -webkit-perspective: 800px; -webkit-perspective-origin: 50% 50%; } /*紙飛行機の前面*/ /*最初は回転しない*/ .front-end.show-front{ 変換: rotateY(0deg); } /*クリックして回転*/ 。フロントエンド{ 背景: rgba(255, 255, 255, 0.15); *背景: hsl(0, 0%, 88%); /*Y軸を中心に-180度回転*/ 変換: rotateY(-180deg); 位置: 相対的; ボックスのサイズ: 境界線ボックス; パディング: 20px; テキスト配置: 中央; 背面の可視性: 非表示; 幅: 400ピクセル; 高さ: 260px; 上: 240px; 遷移: すべて 0.8 秒のイーズイン アウト。 マージン: 自動; } /*テキストボックス*/ .テキスト入力{ 幅: 100%; 最大幅:360px; 最小高さ:100px; パディング: 10px; ボックスのサイズ: 境界線ボックス; 高さ: 140px; 背景色: #ffffff; フォントスムージング: サブピクセルアンチエイリアス; フォントサイズ: 18px; テキスト配置: 左; フォント ファミリ: "Microsoft YaHei"、Helvetica、Arial、Verdana; 行の高さ: 20px; } 。飛ぶ{ 遷移: すべて 0.3 秒のイーズイン アウト。 /*hsl は色相/彩度/明度です/*/ 境界線: 2px実線 hsl(194, 100%, 72%); マージン: 15px 0; パディング: 10px; アウトライン: なし; フォントサイズ: 18px; カーソル: ポインタ; フォントファミリ: "Microsoft YaHei"; 背景色: hsl(0, 0%, 94%); 境界線の半径:4px; ユーザー選択: なし; } /*ボタンをクリックしたときにアニメーションを縮小する*/ .fly:アクティブ{ 変換: スケール(0.85); 遷移: すべて 10 ミリ秒のイーズイン アウト。 背景色: hsl(0, 0%, 85%); 境界線: 2px実線 hsl(194, 30%, 55%); } .バックアップ終了{ パースペクティブ: 600px; パースペクティブ原点: 200px 131px; 変換スタイル: 3D を保持します。 遷移: すべて 0.8 秒のイーズイン アウト。 背面の可視性: 非表示; 位置: 相対的; 幅: 400ピクセル; 高さ: 260px; マージン: 自動; } /*最初は飛行機を見せない*/ .backup-end.show-backup{ 変換: rotateY(180deg); } /*航空機の左側と右側の共通スタイル*/ .左平面、.右平面{ 変換スタイル: 3D を保持します。 幅: 200ピクセル; 高さ: 260px; 表示: ブロック; 位置: 絶対; 上: 0px; 遷移: すべて 1 のイーズイン アウト。 } /*左*/ .左平面{ 変換: rotateZ(0deg); 変換の原点: 100% 50% 0; 左: 0; } /*右*/ .右平面{ 変換: rotateZ(0deg); 変換の原点: 0% 50%; 左: 199px; } /*左右胴体の共通スタイル*/ 。翼{ 位置: 絶対; 変換の原点: 0 0 0; パースペクティブ: 1px; 視点原点: 50% 50%; 背面の可視性: 非表示; 遷移: すべて 1.3 秒線形。 ボックスのサイズ: 境界線ボックス; マージン: 0; パディング: 0; 背景: なし; 境界線: なし; 上境界線: 240px 実線 hsla(0, 0%, 0%, 0); 下境界線: 0px 実線 hsla(0, 0%, 0%, 0); 右境界線: 100px実線 hsl(0, 0%, 88%); 幅: 0; 高さ: 0; 下部: 0; } /*2D航空機のプロトタイプを描く*/ .wing1 { 変換の原点: 100% 100%; transform: translateY(-38px) translateX(8px) rotateZ(22.62deg) skewY(-22.62deg);/*2D画像のオフセット回転*/ } .wing2 { 変換: rotateZ(22.62deg); 変換の原点: 100% 100%; 左境界線: 100px 実線 hsl(0, 0%, 88%); 右境界線: なし; 左: 100px; } .wing3 { 変換: rotateZ(-22.62deg); 変換の原点: 0% 100%; 右境界線: 100px実線 hsl(0, 0%, 88%); } .wing4 { 変換: translateY(-38px) translateX(-8px) rotateZ(-22.62deg) skewY(22.62deg); 変換の原点: 0% 100%; 右境界線: なし; 左境界線: 100px実線 hsl(0, 0%, 88%); 左: 100px; } /*折り畳み可能な領域を描画する*/ .left-top.fold{ 位置: 絶対; 変換の原点: 100px 112px; 遷移遅延: 1300ms; 幅: 0; 高さ: 0; 上: 0; 右境界線: 202px 実線 hsla(0, 0%, 0%, 0); 下境界線: 202px 実線 hsla(0, 0%, 0%, 0); 上境界線: 222px 実線 hsl(0, 0%, 88%); } .right-top.fold{ 位置: 絶対; 右: 0; 左境界線: 202px 実線 hsla(0, 0%, 0%, 0); 下境界線: 202px 実線 hsla(0, 0%, 0%, 0); 上境界線: 222px 実線 hsl(0, 0%, 88%); 変換の原点: 96px 112px; 遷移遅延: 1650ms; } .left-bottom.fold{ 位置: 絶対; 変換の原点: 109px 0; 遷移遅延: 2100ms; 幅: 109px; 高さ: 38px; 背景: hsl(0, 0%, 88%); 下部: 0; 左: 0; } .右下折り目{ 位置: 絶対; 変換の原点: 0 0; 遷移遅延: 2450ms; 幅: 109px; 高さ: 38px; 背景: hsl(0, 0%, 88%); 下部: 0; 右: 0; } /*折り返し部分の残りの三角形の領域を完成させます*/ .left-bottom.fold:after { 位置: 絶対; コンテンツ: ""; 右境界線: 92px 実線 hsla(0, 0%, 0%, 0); 下境界線: 39px 実線 hsl(0, 0%, 88%); 上境界線: 37px 実線 hsla(0, 0%, 0%, 0); 左: 109px; 下部: 0; } .right-bottom.fold:after { 位置: 絶対; コンテンツ: ""; 左境界線: 92px 実線 hsla(0, 0%, 0%, 0); 下境界線: 39px 実線 hsl(0, 0%, 88%); 上境界線: 37px 実線 hsla(0, 0%, 0%, 0); 左: -92px; 下部: 0; } /********************************/ /****ここからjsとの連携を開始*****/ /*折り畳み効果*/ 。折り畳み { 遷移: transform 800ms イーズアウト; 背面の可視性: 非表示; 位置: 絶対; 背景色: 透明; zインデックス: 0; 幅: 0; } /* 折りたたみ効果(左翼、左尾翼) */ .left-top.fold.curved { 変換: rotate3d(1,-1.11,0,180deg); } .left-bottom.fold.curved { 変換: rotate3d(2.4867,1,0,-180deg); } /* 折りたたみ効果(右翼、右尾翼) */ .right-top.fold.curved { 変換: rotate3d(1,1.11,0,180deg); } .right-bottom.fold.curved { 変換: rotate3d(-2.4867,1,0,180deg); } /* 飛行機全体を平らにする */ .飛行機.ホバー{ 変換: rotateX(54度) rotateY(-10度) rotateZ(25度); 遷移遅延: 0.5秒; } /*平らに置いた後、左側が全体的に傾いています(折り畳み効果を反映しています)*/ .backup-end.hover .left-plane { 変換: rotateY(60deg); } .backup-end.hover .right-plane { 変換: rotateY(-60deg); } /* 3Dビジョンで左翼を水平にする */ .backup-end.hover .wing1 { 変換: translateY(-38px) translateX(8px) rotateZ(22.62deg) rotateY(-60deg) skewY(-22.62deg); 右境界線: 100px実線 hsl(0, 0%, 95%); } /*左機体手持ち部分の透明度を下げました*/ .backup-end.hover .wing2 { 左境界線: 100px 実線 hsl(0, 0%, 85%); } /* 3Dビジョンで右翼を水平にする */ .backup-end.hover .wing4 { 変換: translateY(-38px) translateX(-8px) rotateZ(-22.62deg) rotateY(60deg) skewY(20deg); 左境界線: 100px 実線 hsl(0, 0%, 95%); } /*航空機の右側の手持ち部分の透明度が低下します*/ .backup-end.hover .wing3 { 右境界線: 100px実線 hsl(0, 0%, 71%); } /*翼を折り畳む効果(右翼、右尾翼)と余分な部分を非表示にする*/ .backup-end.hover .curved { 表示: なし; } /* #wind_container.hover.wing { 背面の可視性: 可視; } */ /* 飛行機は後方へ移動します*/ .backup-end.hover.fly_away_first { 変換: translateX(-100px) translateZ(300px) rotateX(42deg) rotateY(-11deg) rotateZ(27deg); 遷移遅延: 0ms; 遷移期間: 0.4秒; 遷移タイミング関数: イーズアウト; } /* 飛行機は消えるまで前方に飛行します */ .backup-end.hover.fly_away_first.fly_away { 変換: translateX(600px) translateY(-400px) translateZ(-5000px) rotateX(66deg) rotateY(-12deg) rotateZ(36deg); 遷移: transform 2s easy-out、不透明度 1.5s 0.5s linear; 不透明度: 0; } js: // 子供の頃の紙飛行機 const fly = document.getElementsByClassName('fly')[0]; フロントエンド const バックアップ = document.getElementsByClassName('backup-end')[0]; 折り畳み = document.getElementsByClassName('折り畳み'); fly.addEventListener('クリック', () => { 最初()、次に(2番目)、次に(3番目)、次に(4番目)、次に(5番目)、キャッチ((err)=> { コンソール.log(エラー) }); }、 間違い); // 最初のステップ関数 first() { 新しい Promise((suc, err) => { を返す タイムアウトを設定する(() => { // 情報パネルを非表示にします front.classList.remove('show-front'); // 前面に反転します。backup.classList.remove('show-backup'); // 折り畳み効果(左翼、右翼) (i = 0 とします; i < fold.length; i++) { fold[i].classList.add('curved') } // 色変換 document.body.style.backgroundColor = "#54575A"; 成功した(1) }, 200) }) } 関数 second() { 新しい Promise((suc, err) => { を返す setTimeout(関数() { バックアップクラスリストに「ホバー」を追加します。 document.body.style.backgroundColor = "#AD8BD8"; 成功した(2) }, 2800); }) } //ステップ3: 飛行機は後進して走行を開始する function third() { 新しい Promise((suc, err) => { を返す setTimeout(関数() { バックアップクラスリストに「fly_away_first」を追加します。 ドキュメントのbodyスタイルの背景色 = "#6E99C4"; 成功した(3) }, 2000); }) } // ステップ4: 飛行機は消えるまで前方に飛行します function fourth() { 新しい Promise((suc, err) => { を返す setTimeout(関数() { バックアップクラスリストに「fly_away」を追加します。 ドキュメントのbodyスタイルの背景色 = "#3F9BFF"; 成功した(4) }, 600); }) } 関数 5番目() { 新しい Promise((suc, err) => { を返す setTimeout(関数() { front.classList.add('show-front'); バックアップクラスリストを削除します('fly_away'、'fly_away_first'、'hover'); バックアップクラスリストに「バックアップを表示」を追加します。 (i = 0 とします; i < fold.length; i++) { fold[i].classList.remove('curved') } ドキュメント本体スタイルの背景色 = "#000"; 成功した(5) }, 3000); }) } 要約する 上記は、子供の頃の紙飛行機を実現するために私が紹介した CSS3 です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信します。 |
<<: デザイン理論:計画、リソース、コミュニケーションの問題について
>>: HTML の一般的でないタグ optgroup、sub、sup、bdo のサンプルコード
MACでMySQLの初期パスワードを忘れた問題を解決する方法を参考までに共有します。具体的な内容は次...
前回の記事では、beforeとafterの擬似要素を使用してMaterial Designスタイルの...
問題の説明: Linux システムのネットワーク カード ファイル /etc/sysconfig/n...
序文この記事では、Windows で Mysql をバックアップするための簡単な BAT スクリプト...
前回の記事では、Zabbix のネットワーク検出機能について学習し、アクションと組み合わせてホストの...
目次概要マップされた型を使用して Object.freeze() を構築するマッピングタイプの構文は...
記録として、将来使用される可能性があり、困っている友人も使用できます。 BBはもうやめて、まずはレン...
体の部位: <button>ライトのオン/オフを切り替える</button>...
1. csvファイルをインポートする次のコマンドを使用します。 1.mysql> infile...
テスト環境: C:\>systeminfo | findstr /c:"OS 名&q...
ほとんどのブラウザはデフォルトで入力値をキャッシュし、ctl+F5 を使用して強制的に更新することに...
目次1. クロージャとは何ですか? 2. 閉鎖の役割序文: JavaScript部分ではクロージャが...
Linux ストリーム エディターは、データ センターでスクリプトを実行するのに便利な方法です。これ...
IE10 では、<input> と <input type="passw...
[LeetCode] 178.ランクスコアスコアをランク付けする SQL クエリを記述します。2 ...