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

推薦する

MySql テーブル、データベース、シャーディング、パーティショニングの知識ポイントの紹介

1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...

Centos 6.9 に MySQL をインストールするための詳細なチュートリアル

1. MySQLがインストールされているかどうかを確認します。次のコードで確認できます。 [root...

Linuxカーネルマクロcontainer_ofの詳細な分析

1. 前述の通り数年前、Linux ドライバーのコードを読んでいたときにこのマクロを見ました。長い間...

MySQL ストレステストツール Mysqlslap の使用

1. MySQL独自のストレステストツールMysqlslap mysqlslap は、mysql に...

CenOS6.7 mysql 8.0.22 のインストールと設定方法のグラフィックチュートリアル

CenOS6.7 は MySQL8.0.22 (推奨コレクション) をインストールします1. MyS...

Centos7 で NIS を構成する詳細な手順

目次原理ネットワーク環境の準備インストール前の準備NIS サーバー操作NIS クライアント操作原理N...

MySQL 圧縮の使用シナリオとソリューション

導入圧縮トランスポート プロトコル、圧縮列ソリューション、圧縮テーブル ソリューションなど、MySQ...

VUE + OPENLAYERSがリアルタイムポジショニング機能を実現

目次序文1. ラベルスタイルを定義する2. GeoJSONデータのシミュレーション3. Vercto...

mysql 10進データ型変換の実装

最近、次のデータ型のデータベースに遭遇しました:decimal(14,4)発生した問題は次のとおりで...

CentOS7 上で KVM 仮想化プラットフォームを構築する (3 つの方法)

KVM はカーネルベースの仮想マシンの略で、Linux をハイパーバイザーに変換する Linux ...

MySqlのインストールとアンインストールに関する詳細なチュートリアル

この記事では、MySqlのインストールとアンインストールのチュートリアルを参考までに紹介します。具体...

nodejs で worker_threads を使用して新しいスレッドを作成する方法

導入前の記事で述べたように、NodeJS には 2 種類のスレッドがあります。1 つは、ユーザー リ...

element-uiのアップロードコンポーネントでファイルやその他のパラメータを転送する際の問題を分析する

最近、element-ui を統合したプロジェクトで vuethink を使用しました。以前は bo...

強くお勧めします! Vue 3.2 でシンタックスシュガーを設定する

目次前の1. セットアップ構文シュガーとは何か2. セットアップコンポーネントを使用して自動的に登録...

クラウド CentOS で Docker リモート サービス リンクを有効にするための実装手順

ここでは、dockerがインストールされたcentosサーバーを紹介し、リモートリンクサービスを開始...