まず、完成した効果をお見せしましょう 主なアイデア: 実際、このブラインドは一種の手品を使用しています。マウスを画像の上に移動すると、画像が拡大するように見えます。実際には、これらの画像はまったく動きません。これらの画像をリストに入れて重ね合わせ、マウスが動くとリストの幅が変わるだけです。 ステップ1: シャッターフレームを作成する HTMLコード: <div class="コンテナ"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> CSSコード: *{ マージン: 0; パディング: 0; } 。容器{ マージン: 100px 自動; 境界線: 2px実線 #568bc7; 幅: 800ピクセル; 高さ: 300px; } .コンテナ ul{ ディスプレイ: フレックス; } .コンテナ li{ 幅: 160ピクセル; 高さ: 300px; リストスタイル: なし; 左境界線: 1px 実線 #194b8d; } .コンテナ li img{ 表示: ブロック; 幅: 800ピクセル; 高さ: 300px; } 注: ここでの li の幅は手動で計算する必要があるかもしれません。 エラスティック ボックスを使用して自動均等分割を実現できますが、ホバーを追加した後にバグが見つかりました。試してみてください。 ここではエラスティック ボックスは使用されていません。これで次のフレームワークが得られます。 ステップ2: 画像を挿入し、ホバーを使用して特殊効果を作成します ここに5枚の絵を挿入しました ここで、画像がコンテナの範囲を超えていることがわかります この時点で、オーバーフロー隠しを追加します このようなブラインドはスケールがあります。デモGIFのように画像を動かすにはどうすればいいでしょうか? .コンテナ ul:hover li{ 幅: 40px; } .コンテナ ul li:hover{ 幅: 600ピクセル; } このデモは、実際には :hover 属性の柔軟な使用法の練習です。 ステップ3: 詳細 上記を完了すると、プロセス全体が非常に堅固であることがわかります。ここで、遷移属性を追加して、変化をよりスムーズにすることができます。同時に、各 li の左境界に小さな影効果を追加して、より立体的に見えるようにします。 ボックスシャドウ: 0 0 25px #000; 遷移: すべて 0.5 秒; ついに完成しました 完全なコードは次のとおりです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <スタイル> *{ マージン: 0; パディング: 0; } 。容器{ マージン: 100px 自動; 境界線: 2px実線 #568bc7; 幅: 800ピクセル; 高さ: 300px; オーバーフロー: 非表示; } .コンテナ ul{ ディスプレイ: フレックス; } .コンテナ li{ 幅: 160ピクセル; 高さ: 300px; リストスタイル: なし; 左境界線: 1px 実線 #194b8d; ボックスシャドウ: 0 0 25px #000; 遷移: すべて 0.5 秒; } .コンテナ li img{ 表示: ブロック; 幅: 800ピクセル; 高さ: 300px; } .コンテナ ul:hover li{ 幅: 40px; } .コンテナ ul li:hover{ 幅: 600ピクセル; } </スタイル> </head> <本文> <div class="コンテナ"> <ul> <li><img src="./img/tq1.jpg" alt=""></li> <li><img src="./img/tq2.jpg" alt=""></li> <li><img src="./img/tq3.jpg" alt=""></li> <li><img src="./img/tq4.jpg" alt=""></li> <li><img src="./img/tq5.jpg" alt=""></li> </ul> </div> </本文> </html> 純粋な CSS でイメージ ブラインド表示効果を実現する方法については、これで終わりです。CSS イメージ ブラインドに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 |
<<: HTML ページ スタイルの !-- -- の機能は何ですか?
>>: JavaScript BOMの構成と一般的なイベントの詳細な説明
1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...
1. MySQLがインストールされているかどうかを確認します。次のコードで確認できます。 [root...
1. 前述の通り数年前、Linux ドライバーのコードを読んでいたときにこのマクロを見ました。長い間...
1. MySQL独自のストレステストツールMysqlslap mysqlslap は、mysql に...
CenOS6.7 は MySQL8.0.22 (推奨コレクション) をインストールします1. MyS...
目次原理ネットワーク環境の準備インストール前の準備NIS サーバー操作NIS クライアント操作原理N...
導入圧縮トランスポート プロトコル、圧縮列ソリューション、圧縮テーブル ソリューションなど、MySQ...
目次序文1. ラベルスタイルを定義する2. GeoJSONデータのシミュレーション3. Vercto...
最近、次のデータ型のデータベースに遭遇しました:decimal(14,4)発生した問題は次のとおりで...
KVM はカーネルベースの仮想マシンの略で、Linux をハイパーバイザーに変換する Linux ...
この記事では、MySqlのインストールとアンインストールのチュートリアルを参考までに紹介します。具体...
導入前の記事で述べたように、NodeJS には 2 種類のスレッドがあります。1 つは、ユーザー リ...
最近、element-ui を統合したプロジェクトで vuethink を使用しました。以前は bo...
目次前の1. セットアップ構文シュガーとは何か2. セットアップコンポーネントを使用して自動的に登録...
ここでは、dockerがインストールされたcentosサーバーを紹介し、リモートリンクサービスを開始...