画像ブラインド表示の効果を実現するための純粋な CSS の例

まず、完成した効果をお見せしましょう

主なアイデア: 実際、このブラインドは一種の手品を使用しています。マウスを画像の上に移動すると、画像が拡大するように見えます。実際には、これらの画像はまったく動きません。これらの画像をリストに入れて重ね合わせ、マウスが動くとリストの幅が変わるだけです。

ステップ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 属性の柔軟な使用法の練習です。
まず、2行のコードの順序は変更できないことに注意してください。まず、マウスがulの大きなコンテナに移動すると、最初にliの幅を小さくし、次に次の行のホバーをトリガーします。各liに移動すると、liの幅を大きくします。

ステップ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の構成と一般的なイベントの詳細な説明