いつものように、まずは画像効果を投稿しましょう: このエフェクトの原理は非常にシンプルです。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 を応援していただければ幸いです。 |
<<: ウェブページのエクスペリエンス: ウェブページのカラーマッチング
1. 三角形境界線の設定 コード: 幅: 300ピクセル; 高さ: 300px; 背景: 赤; 境界...
目次1. 技術概要2. 技術的な詳細1. インターフェースからバックエンドデータを取得する2. フロ...
Ubuntu 20.04 では、デフォルトで root ログインが有効になっていないため、デスクトッ...
この記事では、タイムライン効果を実現するためのvue+swiperの具体的なコードを参考までに共有し...
導入増分バックアップとは、完全バックアップまたは最後の増分バックアップの後、後続の各バックアップでは...
目次1. 父から息子へ2. 息子から父へ3. ブラザーコンポーネント通信(バス) 4. ref/re...
設定ファイルに直接 サーバー{ listen 80 default; # IPへの直接アクセスを禁止...
この記事では、WeChatアプレットのレコード機能を実装するための具体的なコードを参考までに紹介しま...
この要件を受け取ったとき、Baidu は、CSS リンクの置き換え、className の変更、le...
背景ブロックチェーン ログ モジュールで作業しているときに、コンテナーが実行されている場合は、ログ ...
目次1. JavaScript とは何ですか? 2. JavaScript は何に使用されますか? ...
目次使用されるAPI簡単な例人.ts親コンポーネントサブコンポーネント効果要約する使用されるAPI ...
TW のメインテキスト ページは、以前は小さなモニターと低解像度のユーザーを考慮して幅が 850 ピ...
今日は、ローカルの Docker プロジェクト イメージを dockerhub に公開する方法を紹介...
通常、国喪の日、大地震の日、清明節には、ウェブサイト全体を灰色にして、故人への哀悼の意を表します。そ...