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

画像ブラインド表示の効果を実現するための純粋な 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の構成と一般的なイベントの詳細な説明

推薦する

Vue.jsはカレンダー機能を実装します

この記事では、カレンダー機能を実装するためのVue.jsの具体的なコードを例として紹介します。具体的...

JavaScript の基礎におけるデータ型の詳細な説明

目次1. データ型1.1 なぜデータ型が必要なのか? 1.2 変数のデータ型1.3 データ型の分類2...

キーボード上の各種特殊記号の英語読み方(知識の普及)

キーボード文字英語`バッククォート〜チルダ!叫ぶ@で#ナンバーサイン$ドル%パーセント^キャレット&...

HTMLはシンプルで美しいログインページを作成します

まずは見てみましょう。 HTML ソースコード: XML/HTML コードコンテンツをクリップボード...

ページスピードの最適化の概要

インターネットは人々の生活にますます欠かせないものになってきていると思います。 Ajax や fle...

Nginx の負荷分散構成、ダウンタイム発生時の自動切り替えモード

厳密に言えば、nginx には負荷分散バックエンド ノードのヘルス チェック機能はありませんが、デフ...

複数のドメイン名に対する Nginx リバース プロキシを使用した HTTP および HTTPS サービスの実装

現在、Nginx は、Web サービスを提供するために、Windows ベースの IIS と Lin...

Win2008 R2 mysql 5.5 zip 形式 mysql のインストールと設定

Win2008 R2 zip形式のMySQLのインストールと設定1. Baidu MySQL 5.6...

CentOS 8.4 での Docker パッケージのオフラインインストールの問題について

使用する仮想マシンは、サーバー環境をシミュレートする CentOS 8.4 です。外部ネットワークに...

CSS でテキストカラーグラデーションを実装する 3 つの方法

Web フロントエンド開発のプロセスでは、UI デザイナーはグラデーション テキストを使用したデザイ...

CocosCreator ユニバーサルフレームワークデザインネットワーク

目次序文Websocketの使用Websocketオブジェクトの構築Websocket ステータスW...

LinuxでRPMを使用してmysql5.7.17をインストールする

LinuxでのMySQL5.7 rpmのインストール方法を参考までに記録します。具体的な内容は以下の...

高度な JavaScript フロントエンド開発でよく使用されるいくつかの API の例の詳細な説明

目次ミューテーションオブザーバーAPI特徴インターセクションオブザーバーAPI例えば画像の遅延読み込...

docker ベースで Prometheus+Grafana を構築する手順の詳細説明

1. プロメテウスの紹介Prometheus は、もともと SoundCloud によって開発された...

MySQL binlog ログを開く方法

binlog は、すべての mysql dml 操作を記録するバイナリ ログ ファイルです。 bin...