HTML5 & CSS3 only Accordion Effect – aduca

今日は右京くんに頼まれたのでアコーディオンエフェクトをHTML5とCSS3で実装する。 基本的なDOM構造はこんなもの、 - body `- section#accordion |- section | |- h2 | `- p |- section | `- ... |- section | `- ... `- section `- ... んでこれらにエフェクトを与えるのだけれど、その前にとりあえず現物のサンプル。 CSS Accordion CSSなどのコードもすべてこのHTML一枚にかいてあります。(Firefoxでも動くみたいだけどWebkit系ブラウザが一番綺麗にアニメーションします) hoverの関係 最下層のsection上にポインタがある場合、その親要素にも:hoverが付く。 これを利用しないと、単純に:not(:hover)してしまうと、普通の状態(ポインタが一切ない

[hysa]

JavaScriptを使わないでアコーディオン

[june29]

アコーディオンエフェクト。WebKit で閲覧するときれい。

[teppeis]

JavaScriptに比べてCPUにかなりやさしい。

[chi-bit]

HTML5とCSS3だけでアコーディオン。JavaScriptで動かすより滑らか。

[rosylilly]

HTML5とCSS3でアコーディオンエフェクト実装した。 #html5 #css3

[yaakaito]

thank you