CSS3 で画像ドロワー効果を実装するためのサンプル コード

CSS3 で画像ドロワー効果を実装するためのサンプル コード

いつものように、まずは画像効果を投稿しましょう:

このエフェクトの原理は非常にシンプルです。CSS3 アニメーションとトランジションの知識があれば、JS コードは必要ありません。

HTMLコード:

<div>
        <ul id="リスト">
            <li>
                <a href="">国際ビューティープレビュー</a>
                <img src="images/1.jpg" />
            </li>
            <li>
                <a href="">女神標準ディスカッション</a>
                <img src="images/2.jpg" />
            </li>
            <li class="select">
                <a href="">食通でも食べれば体重は減る</a>
                <img src="images/3.jpg" />
            </li>
            <li>
                <a href="">ドレスが注目を集める</a>
                <img src="images/4.jpg" />
            </li>
            <li>
                <a href="">ゴンサンヒロイン美の対決</a>
                <img src="images/5.jpg" />
            </li>
        </ul>
    </div>

CSSコード:

*{ マージン:0; パディング:0; }
    ul{ リストスタイル:なし; }
    a{ フォントサイズ:16px; テキスト装飾:なし; 色:#666; }
    div{ 幅:300px; 余白:20px 自動; }
    #list li{ line-height:40px;height:40px;background:#efefef;text-indent:1em; margin-bottom:3px;overflow:hidden;-webkit-transition:height 0.3s easy;-moz-transition:height 0.3s easy-ms-transition:height 0.3s easy;-o-transition:height 0.3s easy;transition:height 0.3s easy;}
    #リスト li img{ 幅:300px; 高さ:200px; }
    #リスト li:nth-child(1){高さ:240px;背景:#F36;}
    #リスト li:nth-child(1) a{ color:#fff; }
    #list:hover li{ 高さ:40px; 背景:#efefef; }
    #list:hover li a{color:#666;}
    #リスト li:hover{ 高さ:240px; 背景:#F36;}
    #list li:hover a{ color:#fff; }

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  ウェブページのエクスペリエンス: ウェブページのカラーマッチング

>>:  MySQLスケーラブル設計の基本原則

推薦する

CSSで特殊なグラフィックを描く方法

1. 三角形境界線の設定 コード: 幅: 300ピクセル; 高さ: 300px; 背景: 赤; 境界...

Vueのフロントエンドとバックエンドのデータのやり取りと表示を理解する方法

目次1. 技術概要2. 技術的な詳細1. インターフェースからバックエンドデータを取得する2. フロ...

Ubuntu 20.04の新バージョンでルートユーザーを使用してシステムにログインする方法の詳細なチュートリアル

Ubuntu 20.04 では、デフォルトで root ログインが有効になっていないため、デスクトッ...

Vue+swiperでタイムライン効果を実現

この記事では、タイムライン効果を実現するためのvue+swiperの具体的なコードを参考までに共有し...

MySQL 増分バックアップとブレークポイントリカバリスクリプトの例

導入増分バックアップとは、完全バックアップまたは最後の増分バックアップの後、後続の各バックアップでは...

Vue 値転送の 12 の方法の概要

目次1. 父から息子へ2. 息子から父へ3. ブラザーコンポーネント通信(バス) 4. ref/re...

NginxはIP経由の直接アクセスを禁止し、カスタム500ページにリダイレクトします

設定ファイルに直接 サーバー{ listen 80 default; # IPへの直接アクセスを禁止...

WeChatアプレットは記録機能を実装します

この記事では、WeChatアプレットのレコード機能を実装するための具体的なコードを参考までに紹介しま...

CSS 変数に基づくテーマ切り替えに最適なソリューション (推奨)

この要件を受け取ったとき、Baidu は、CSS リンクの置き換え、className の変更、le...

Dockerボリュームのファイルマッピング方法

背景ブロックチェーン ログ モジュールで作業しているときに、コンテナーが実行されている場合は、ログ ...

JavaScriptとTypeScriptの関係

目次1. JavaScript とは何ですか? 2. JavaScript は何に使用されますか? ...

Angularの親子コンポーネント通信の詳細な説明

目次使用されるAPI簡単な例人.ts親コンポーネントサブコンポーネント効果要約する使用されるAPI ...

テーブルを使用する場合と CSS を使用する場合 (経験の共有)

TW のメインテキスト ページは、以前は小さなモニターと低解像度のユーザーを考慮して幅が 850 ピ...

ローカルでビルドした Docker イメージを Dockerhub に公開する方法

今日は、ローカルの Docker プロジェクト イメージを dockerhub に公開する方法を紹介...

ウェブサイトはグレー表示されています。画像を含む互換コードはすべてのブラウザをサポートしています

通常、国喪の日、大地震の日、清明節には、ウェブサイト全体を灰色にして、故人への哀悼の意を表します。そ...