CSS3は子供のころの紙飛行機を実現する

CSS3は子供のころの紙飛行機を実現する

今日は折り紙飛行機(飛べる飛行機)を作ります

基本的にすべて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 のサンプルコード

推薦する

jQueryはフォーム検証を実装する

jQueryを使用してフォーム検証を実装します。参考までに、具体的な内容は次のとおりです。登録.ht...

ウェブページの広告デザインにおけるウェブデザインの寸法とルール

1. 800*600 未満の場合、Web ページの幅が 778 以内であれば、水平スクロール バーは...

Reactは動的ポップアップウィンドウコンポーネントを実装します

UI コンポーネントを作成するときに、アニメーションを考慮しなければ、アニメーションを実現するのは非...

Docker nginxのインストールと設定方法

DockerでNginxイメージをダウンロードする docker プル nginx Docker イ...

文字列の最初の文字を取得してテキストアイコン機能を実現する純粋なCSS

CSS でテキストアイコンを実装する方法 /*アイコンスタイル*/ .nav-icon-norma...

仮想マシンを作成し、VMware に Redhat Linux オペレーティング システムをインストールする (グラフィック チュートリアル)

VMware で仮想マシンを作成し、Redhat Linux オペレーティング システムをインスト...

Linuxで$を#に変更する方法

このシステムでは、# 記号は root ユーザーを表し、$ 記号は通常のユーザーを表します。では、ど...

js でパズルゲームを実装する

この記事では、パズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容は...

vue+django でファイルをダウンロードする例

目次1. 概要2. Django プロジェクト3. Vueプロジェクト1. 概要プロジェクトで、ダウ...

Windows に MySQL 8.0.16 をインストールする手順とエラーの解決方法

1. はじめに: mysql8以降は、これまでよく使われていたバージョンと比べてかなり変更点が大きい...

vue-element-admin グローバル読み込み待機中

最近の要件:グローバルロード、すべてのインターフェースはロード待機機能を表示するかどうかを手動で制御...

Linux での Centos7 ファイアウォールの基本的な使用方法の詳細な説明

1. ファイアウォールの基本的な使い方起動する: systemctl は、firewalld を起動...

Alibaba Cloud ホストが IP を使用して Web サイトにアクセスできない問題の解決策 (セキュリティ グループ ルールを構成することで解決)

Alibaba Cloud ホストを購入したばかりで、その速度を試すのが待ちきれませんでした。しか...

Selenium+testng を使用して Docker で Web 自動化を実現する方法

序文長い間さまざまな資料を読んで、ついに selenium+testng のパラメータ化の問題を解決...