いつものように、まずは画像効果を投稿しましょう: このエフェクトの原理は非常にシンプルです。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 を応援していただければ幸いです。 |
<<: ウェブページのエクスペリエンス: ウェブページのカラーマッチング
HTML Web ページ リスト タグの学習チュートリアル。 HTML ページでは、リストはアウトラ...
1.# # は Web ページ内の場所を表します。右側の文字はその位置の識別子です。たとえば、ht...
<br /> 特定の Web サイトを閲覧して、優れた Web ページを見つけた場合、そ...
MySQLテーブルの自動インクリメント列の初期値をリセットする方法1. 問題の説明MySQL データ...
テーブルを作成する テーブル `map` を作成します ( `id` int(11) NULLではな...
序文:年末です。データベースを検査する時期ではないでしょうか?一般的に、検査では、パスワードの複雑さ...
これらはすべて海外のE-WebTemplates WebサイトからのWebページテンプレートであり、...
自己学習型ゲーム開発の道において、最も充実した瞬間は、自分でミニゲームを作り、友達と共有して試しにプ...
質問画像とテキストのシームレスなスクロールは、一般的に携帯電話では良い効果をもたらしますが、一部のモ...
最近、「フットボール ナビゲーション」Web サイトに取り組んでいるときに、上部の固定ナビゲーション...
目次1. ReactJS の紹介2. ReactJSの理解とReactJSの利点1. ReactJS...
目次1. fill() 構文2. fill() の使用3. まとめ序文:配列の初期化方法についてはよ...
BackUpMysql.sh スクリプト #!/bin/bash PATH=/bin:/sbin:/...
MySQL 8.0.12 のダウンロードとインストールのチュートリアルを録画し、全員と共有しました。...
sftp は、安全なファイル転送プロトコルである Secure File Transfer Prot...