2020年11月14日(土)

detailsタグを使った開閉コンテンツのスタイルサンプルいろいろ

• 0
• 0
• 10
• 18

Result

See the Pen

Animation by kachibito
(@kachibito) on CodePen.

detailsタグを使った開閉コンテンツのスタイリングサンプル集です。

JSは開閉時のアニメーションに使用されているので、無くても開閉やアイコンのアニメーションに影響はありません。

css

[data-css-icon] { --animdur: .3s; --loading-animdur: 0.8s; --animtf: ease-in; --bdw: 2px; --bdrs: 50%; --bgc: transparent; --c: currentcolor; --dots-bgc: silver; --dots-size: 0.5rem; --icon-size: 1rem; --size: 2.5rem; align-items: center; cursor: pointer; display: flex; justify-content: space-between; } [data-css-icon] i { align-items: cen...