この記事では、純粋な CSS を使用してアコーディオン効果を実現するためのサンプルコードに関する関連情報を中心に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
私は昨日旅行ページのプロジェクトに取り組んでいて、フロントエンドページの実装中にそのようなニーズに遭遇しました。画像のグループをアコーディオン表示効果に形成する必要があります。よく考えた結果、この要件を達成するには通常の HTML+CSS を使用することにしました。今日は空き時間を利用して少し整理してみました。
実装原理:
主にCSSのhover属性を使用し、マウスが上に移動されていない場合、すべてのliがコンテナ全体の幅を共有します。マウスを上に移動すると、ホバーが有効になり、li タグが元の画像の幅に戻り、他の画像が残りの幅を共有できるようになります。同時にトランジション属性を追加してグラデーション効果を生み出します。
次に、小さなデモを通して個人的に体験してみましょう:
HTML コード:
<body>
<p class="contain">
<ul>
<li>
<a href="#">
<img src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" / alt="純粋なCSSを使ったアコーディオン効果の実装例を詳しく解説" >
</a>
<p class="title">
<a href="#">云南.大理</a>
</p>
</li>
<li>
<a href="#">
<img src="/static/imghwm/default1.png" data-src="img/2.jpg" class="lazy" / alt="純粋なCSSを使ったアコーディオン効果の実装例を詳しく解説" >
</a>
<p class="title">
<a href="#">广西.桂林</a>
</p>
</li>
<li>
<a href="#">
<img src="/static/imghwm/default1.png" data-src="img/3.jpg" class="lazy" / alt="純粋なCSSを使ったアコーディオン効果の実装例を詳しく解説" >
</a>
<p class="title">
<a href="#">福建.厦门</a>
</p>
</li>
<li>
<a href="#">
<img src="/static/imghwm/default1.png" data-src="img/4.jpg" class="lazy" / alt="純粋なCSSを使ったアコーディオン効果の実装例を詳しく解説" >
</a>
<p class="title">
<a href="#">浙江.千岛湖</a>
</p>
</li>
<li>
<a href="#">
<img src="/static/imghwm/default1.png" data-src="img/5.jpg" class="lazy" / alt="純粋なCSSを使ったアコーディオン効果の実装例を詳しく解説" >
</a>
<p class="title">
<a href="#">长江.三峡</a>
</p>
</li>
</ul>
</p>
</body>CSS コード:
.contain {
width: 1050px;
margin: 100px auto;
}
.contain li {
float: left;
list-style: none;
width: 200px;
height：284px;
transition: all 2s;
position: relative;
overflow: hidden;
border-left: 2px solid rgba(255, 255, 255, .8);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
}
.contain ul:hover li {
width: 80px;
}
.contain ul li:hover {
width: 500px;
}
.contain li .title {
position: absolute;
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, .5);
text-indent: 2em;
line-height: 50px;
bottom: 0px;
left: 0
}
.contain a {
color: #fff;
text-decoration: none;
}効果図は次のとおりです:
マウスが使用されていない場合上に移動 効果
マウスを特定の画像に移動する効果
これは非常にシンプルな小さなデモで、使いやすく、初心者にとっては難しくありません。同時に、今回のデモを通してCSSの威力や魅力も感じたので、少しでもお役に立てれば幸いです。最後に、このデモで使用した知識ポイントを整理して要約します。
1.hover セレクター
説明: :hover セレクターは、マウス ポインターが浮いている要素を選択するために使用されます。 :hover セレクターは、リンクだけでなくすべての要素で使用できます。
追加: :link セレクターは未訪問のページを指すリンクのスタイルを設定し、:visited セレクターは訪問済みのページを指すリンクの設定に使用され、:active セレクターはアクティブなリンクに使用されます。
拡張: CSS 定義では、スタイルを有効にするには、:hover を :link および :visited (存在する場合) の後に配置する必要があります。
2.トランジション属性
説明: トランジションは CSS3 の略称プロパティで、4 つのトランジション プロパティを設定するために使用されます:
transition-property: トランジション効果を設定する CSS プロパティの名前を指定します。
transition-duration: トランジション効果が完了するまでにかかる秒数またはミリ秒数を指定します。
transition-timing-function: スピードエフェクトのスピードカーブを指定します。
transition-lay: トランジション効果がいつ開始されるかを定義します。
構文: 遷移: プロパティ持続時間タイミング関数遅延;
関連推奨事項:
シンプルなアコーディオン効果のサンプル コードの jQuery 実装
以上が純粋なCSSを使ったアコーディオン効果の実装例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
CSSグリッドとは何ですか？Apr 30, 2025 pm 03:21 PMCSSグリッドは、複雑で応答性の高いWebレイアウトを作成するための強力なツールです。設計を簡素化し、アクセシビリティを向上させ、古い方法よりも多くの制御を提供します。
CSS Flexboxとは何ですか？Apr 30, 2025 pm 03:20 PM記事では、レスポンシブデザインにおけるスペースの効率的なアラインメントと分布のためのレイアウト方法であるCSS FlexBoxについて説明します。 FlexBoxの使用量を説明し、CSSグリッドと比較し、ブラウザのサポートを詳細に説明します。
CSSを使用してWebサイトを応答するにはどうすればよいですか？Apr 30, 2025 pm 03:19 PMこの記事では、ビューポートメタタグ、柔軟なグリッド、流体メディア、メディアクエリ、相対ユニットなど、CSSを使用してレスポンシブWebサイトを作成するための手法について説明します。また、CSSグリッドとフレックスボックスを使用してカバーし、CSSフレームワークを推奨しています
CSSボックスサイズのプロパティは何をしますか？Apr 30, 2025 pm 03:18 PMこの記事では、要素の寸法の計算方法を制御するCSSボックスサイズのプロパティについて説明します。コンテンツボックス、ボーダーボックス、パディングボックスなどの値と、レイアウト設計とフォームアライメントへの影響について説明します。
CSSを使用してアニメーション化するにはどうすればよいですか？Apr 30, 2025 pm 03:17 PM記事では、CSS、キープロパティ、およびJavaScriptとの組み合わせを使用してアニメーションの作成について説明します。主な問題は、ブラウザの互換性です。
CSSを使用してプロジェクトに3D変換を追加できますか？Apr 30, 2025 pm 03:16 PM記事では、3D変換、主要なプロパティ、ブラウザの互換性、およびWebプロジェクトのパフォーマンスに関する考慮事項にCSSを使用して説明します。
CSSに勾配を追加するにはどうすればよいですか？Apr 30, 2025 pm 03:15 PMこの記事では、CSSグラデーション（線形、放射状、繰り返し）を使用して、ウェブサイトのビジュアルを強化し、深さ、フォーカス、および現代の美学を追加します。
CSSの擬似要素とは何ですか？Apr 30, 2025 pm 03:14 PM記事では、CSSの擬似要素、HTMLスタイリングの強化における使用、および擬似クラスとの違いについて説明します。実用的な例を提供します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
WebStorm Mac版
便利なJavaScript開発ツール
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
ホットトピック
7866
15164914140752130125124329