需要背景プロジェクトはVueを使用して作成され、ビジネス要件にはパズル効果があります。デフォルトの背景画像は暗く、5つの領域に分割されています。毎回1つの領域が点灯し、画像全体が点灯してパズルが完成します。まずは最終的なレンダリングを見てみましょう。 応用知識ポイント:
実装のアイデア:外側の大きなボックスは、暗い背景画像を保持するために使用されます。内部の 5 つのパズルピースは 5 つの div です。各パズルピースは、 背景の回転問題を解決するアイデアは、5 番目のパズルピースの外側の層にボックスを配置し、外側のボックスを右に 45 度回転させてから、背景要素を左に 45 度回転させることです。操作後、新たな問題が見つかりました。下の写真の黒い枠が外箱です(見やすくするため、他のパズルピースは非表示に設定されています)。外側のボックスに 5 番目のパズルピースの幅と高さを大きくし、外側のボックスを 最後に、先ほど始めた効果を実現できます。完全な Vue コードは次のとおりです。 <テンプレート> <セクションクラス="ボックス"> <div class="bg" :style="{ backgroundImage: `url(${bgImg}) ` }"></div> <div v-if="item1Show" class="item item1" :style="{ backgroundImage: `url(${bgImg}) ` }"></div> <div v-if="item2Show" class="item item2" :style="{ backgroundImage: `url(${bgImg}) ` }"></div> <div v-if="item3Show" class="item item3" :style="{ backgroundImage: `url(${bgImg}) ` }"></div> <div v-if="item4Show" class="item item4" :style="{ backgroundImage: `url(${bgImg}) ` }"></div> <div v-if="item5Show" class="item item5wrap"> <div class="item5" :style="{ backgroundImage: `url(${bgImg}) ` }"></div> </div> </セクション> </テンプレート> <スクリプト> 「@/assets/bg.jpeg」からbgImgをインポートします。 エクスポートデフォルト{ データ() { 戻る { 画像, 項目1表示: false、 項目2表示: true、 項目3表示: true、 項目4表示: true、 項目5表示: true }; } }; </スクリプト> <スタイル lang="less"> @境界線の色: #333; 。箱 { マージン: 0px 自動; 幅: 300ピクセル; 高さ: 200px; 背景色: #000; 位置: 相対的; .bg { 幅: 100%; 高さ: 100%; 位置: 絶対; 左: 0; 上: 0; 背景の位置: 中央 中央; 背景繰り返し: 繰り返しなし; 背景サイズ: 100% 100%; 不透明度: 0.5; } 。アイテム { 幅: 50%; 高さ: 50%; ボックスのサイズ: 境界線ボックス; 背景サイズ: 200% 200%; 右境界線: 1px 実線 @borderColor; 下部境界線: 1px 実線 @borderColor; 位置: 絶対; } .item1 { 背景位置: 0 0; 左: 0; 上: 0; } .item2 { 背景位置: 100% 0; 左: 50%; 上: 0; } .item3 { 背景位置: 0 100%; 左: 0; 上位: 50%; } .item4 { 背景位置: 100% 100%; 左: 50%; 上位: 50%; } .item5ラップ{ 幅: 100ピクセル; 高さ: 100px; 左境界線: 1px 実線 @borderColor; 上境界線: 1px 実線 @borderColor; 変換: 回転(45度); 左: 50%; 上位: 50%; 変換: 移動(-50%, -50%) 回転(45度); オーバーフロー: 非表示; .item5 { 幅: 150ピクセル; 高さ: 150px; 背景位置: 50% 50%; 背景サイズ: 200% 133%; 位置: 絶対; 左: 50%; 上位: 50%; 変換: 移動(-50%, -50%) 回転(-45度); } } } </スタイル> CSS3 ダイヤモンドパズルを使用して、div 背景画像を回転させずに回転させる方法についてはこれで終わりです。CSS3 回転画像に関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 |
<<: HTML と CSS に関する基本的なメモ (フロントエンドでは必読)
フレーム構造タグ <frameset></frameset>フレームを使用す...
Alpine イメージの telnet はバージョン 3.7 以降、busybox-extras パ...
目次1. 4つのコンセプト1. JavaScriptはシングルスレッドです2. タスクキュー3. 同...
この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...
1. 圧縮と包装の概要一般的な圧縮ファイルウィンドウズ .rar .zip .7z Linux .z...
目次バイト機能使用環境プロジェクトを構築する構成vite.config.ts tsconfig.js...
ウェブサイトを作成する学生は、アクセス時に一部の nginx サーバーが 504 Gateway T...
1. 正規表現マッチング大文字と小文字を区別するマッチングの場合 ~ ~*は大文字と小文字を区別しな...
1. インストールターミネーターの最大の特徴は、1つのウィンドウで複数のターミナルを開くことができる...
1. refがコピーされ、ビューが更新されますrefを使用してオブジェクトのプロパティ値をレスポンシ...
目次1. コア1. Domノードを取得する2. ノードの更新2.1 実践演習3. Domノードを削除...
Ubuntu 16.04 はデフォルトで PHP7.0 環境をインストールしますが、PHP7 は一部...
ソフィー・ハルダッククライドキー埠頭 37 東ソープボックス Rxバランス EEハーバー対比 SVN...
Mysql でよく使用される表示コマンド1. 現在のデータベース サーバー内のデータベースの一覧を表...
sshd SSH は Secure Shell の略で、アプリケーション層のセキュリティ プロトコル...