まず、完成した効果をお見せしましょう 主なアイデア: 実際、このブラインドは一種の手品を使用しています。マウスを画像の上に移動すると、画像が拡大するように見えます。実際には、これらの画像はまったく動きません。これらの画像をリストに入れて重ね合わせ、マウスが動くとリストの幅が変わるだけです。 ステップ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の構成と一般的なイベントの詳細な説明
この記事では、カレンダー機能を実装するためのVue.jsの具体的なコードを例として紹介します。具体的...
目次1. データ型1.1 なぜデータ型が必要なのか? 1.2 変数のデータ型1.3 データ型の分類2...
キーボード文字英語`バッククォート〜チルダ!叫ぶ@で#ナンバーサイン$ドル%パーセント^キャレット&...
まずは見てみましょう。 HTML ソースコード: XML/HTML コードコンテンツをクリップボード...
インターネットは人々の生活にますます欠かせないものになってきていると思います。 Ajax や fle...
厳密に言えば、nginx には負荷分散バックエンド ノードのヘルス チェック機能はありませんが、デフ...
現在、Nginx は、Web サービスを提供するために、Windows ベースの IIS と Lin...
Win2008 R2 zip形式のMySQLのインストールと設定1. Baidu MySQL 5.6...
使用する仮想マシンは、サーバー環境をシミュレートする CentOS 8.4 です。外部ネットワークに...
Web フロントエンド開発のプロセスでは、UI デザイナーはグラデーション テキストを使用したデザイ...
目次序文Websocketの使用Websocketオブジェクトの構築Websocket ステータスW...
LinuxでのMySQL5.7 rpmのインストール方法を参考までに記録します。具体的な内容は以下の...
目次ミューテーションオブザーバーAPI特徴インターセクションオブザーバーAPI例えば画像の遅延読み込...
1. プロメテウスの紹介Prometheus は、もともと SoundCloud によって開発された...
binlog は、すべての mysql dml 操作を記録するバイナリ ログ ファイルです。 bin...