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スケーラブル設計の基本原則

推薦する

HTML Web ページ リスト タグ学習チュートリアル

HTML Web ページ リスト タグの学習チュートリアル。 HTML ページでは、リストはアウトラ...

URL 内の特殊記号の意味を知っていますか?

1.# # は Web ページ内の場所を表します。右側の文字はその位置の識別子です。たとえば、ht...

ウェブページからテキスト透かしを削除する2つの簡単な方法

<br /> 特定の Web サイトを閲覧して、優れた Web ページを見つけた場合、そ...

MySQLテーブルの自動インクリメント列の初期値をリセットする方法

MySQLテーブルの自動インクリメント列の初期値をリセットする方法1. 問題の説明MySQL データ...

MySQL のジオメトリ型を使用して経度と緯度の距離の問題を処理する方法

テーブルを作成する テーブル `map` を作成します ( `id` int(11) NULLではな...

年末ですが、MySQL パスワードは安全ですか?

序文:年末です。データベースを検査する時期ではないでしょうか?一般的に、検査では、パスワードの複雑さ...

【Webデザイン】E-WebTemplates の美しい海外の Web ページ テンプレート (FLASH+PSD ソース ファイル+HTML) を共有します

これらはすべて海外のE-WebTemplates WebサイトからのWebページテンプレートであり、...

H5ゲームをnginxサーバーにデプロイする方法の詳細な説明

自己学習型ゲーム開発の道において、最も充実した瞬間は、自分でミニゲームを作り、友達と共有して試しにプ...

CSS3はシームレスなスクロールと手ぶれ防止を実現します

質問画像とテキストのシームレスなスクロールは、一般的に携帯電話では良い効果をもたらしますが、一部のモ...

ウェブページの内部アンカーポイントを実現するための純粋なCSSの上下オフセットコード例

最近、「フットボール ナビゲーション」Web サイトに取り組んでいるときに、上部の固定ナビゲーション...

ReactJs 基礎チュートリアル - 基本編

目次1. ReactJS の紹介2. ReactJSの理解とReactJSの利点1. ReactJS...

js 配列 fill() 充填メソッド

目次1. fill() 構文2. fill() の使用3. まとめ序文:配列の初期化方法についてはよ...

MySQL 8.0.12 のインストールと設定のグラフィックチュートリアル

MySQL 8.0.12 のダウンロードとインストールのチュートリアルを録画し、全員と共有しました。...

Linux sftp コマンドの使用法の概要

sftp は、安全なファイル転送プロトコルである Secure File Transfer Prot...