CSS3 マウスホバー遷移ズーム効果

以下は、純粋な CSS で記述された画像マウスホバーズーム効果です。実際、基本原理は非常に単純です。いくつかの Web サイトにアクセスすると、画像に何らかのインタラクティブ効果が適用されていることがわかります。もちろん、JQuery やサードパーティの js アニメーションライブラリを使用するなど、画像遷移効果を実現する方法は多数あります。この例では、基本的な効果のみを示しており、使用されている知識を要約したものではありません。
コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スクリプト></スクリプト>
    <スタイル>
        * {
            ボックスのサイズ: 境界線ボックス;
        }

        体 {
            背景色: rgb(251, 163, 163);
        }
        /* 棒グラフスタイル*/
        .containlist {
            位置: 相対的;
         
            上マージン: 100px;
            左マージン:10%;

            高さ: 100px;
            幅: 80%;

            オーバーフロー: 非表示;
            境界線の半径: 30px;
            ボックスシャドウ: rgb(54, 53, 53) 10px 10px 10px;
         

        }
        .リスト{
           
            位置: 絶対;
            幅: 100%;
            高さ: 100%;

            背景の位置: 中央;
            背景サイズ: カバー;

            境界線の半径: 30px;
            遷移: 0.5秒;
            
            色: 白;
            フォントの太さ: 太字;
            テキスト配置: 中央;
        }
       
        .list:hover {
            変換: スケール(1.2);
        }
    </スタイル>
</head>

<本文>
   
    <h1 style="text-align: center;color: white;background-color: black;">効果テスト</h1>
    <!-- 棒グラフ-->
    <div class="containlist">
        <div class="list" style="背景画像: url(006.jpg);">
            着物少女
    </div>

    <div class="containlist">
        <div class="list" style="背景画像: url(001.png);">
            スカイミラー
    </div>

    <div class="containlist">
        <div class="list" style="背景画像: url(002.png);">
            紫色の風景</div>
    </div>

    <div class="containlist">
        <div class="list" style="背景画像: url(003.png);">
            私はとてもかわいいです</div>
    </div>

     
</本文>

</html>

実際の効果：

ここに画像の説明を挿入

git グラフ

ここに画像の説明を挿入

絵のスタイルを自分で変更して、自分だけの中学校スタイルを作ることができます。

CSS3 マウスホバートランジションズーム効果に関するこの記事はこれで終わりです。CSS3 マウスホバートランジションズームに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL に IP アドレスを効果的に保存する方法と、文字列 IP と数値を変換する方法の詳細な説明

>>: Alipay の Java 決済インターフェースを開発するための詳細な手順