Bootstrap に基づいた垂直アコーディオンアニメーション効果-CSSチュートリアル-php.cn

簡単なチュートリアル

これは、Bootstrap に基づいた垂直アコーディオン効果です。この垂直アコーディオン効果は、ネイティブの Bootstrap Accordion コンポーネントに基づいて作成されており、CSS3 によって美化されており、美しく寛大な効果になっています。

使用方法

HTML構造

垂直アコーディオン効果の基本的なHTML構造は次のとおりです:

        SECTION 1  
 
   ......
 
 
 
 ......

ログイン後にコピー

CSSスタイル

垂直アコーディオン効果の美化CSSスタイルは次のとおりです:

a:hover,a:focus{ text-decoration: none; outline: none; } #accordion .panel{ border: none; box-shadow: none; border-radius: 0; margin-bottom: -5px; } #accordion .panel-heading{ padding: 0; border-radius: 0; border: none; text-align: center; } #accordion .panel-title a{ display: block; padding: 25px 30px; font-size: 16px; font-weight: bold; color: #fff; background: #333; border-bottom: 1px solid #4a4a4a; position: relative; transition: all 0.5s ease 0s; } #accordion .panel-title a:hover{ background: #4a4a4a; } #accordion .panel-title a:after, #accordion .panel-title a.collapsed:after{ content: "\f067"; font-family: FontAwesome; font-size: 15px; font-weight: 200; position: absolute; top: 25px; left: 15px; transform: rotate(135deg); transition: all 0.5s ease 0s; } #accordion .panel-title a.collapsed:after{ transform: rotate(0deg); } #accordion .panel-body{ background: #167ea0; padding: 0 0 0 40px; border: none; position: relative; } #accordion .panel-body p{ font-size: 14px; color: #fff; line-height: 25px; background: #3296b7; padding: 30px; margin: 0; } #accordion .panel-collapse .panel-body p{ opacity: 0; transform: scale(0.9); transition: all 0.5s ease-in-out 0s; } #accordion .panel-collapse.in .panel-body p{ opacity: 1; transform: scale(1); }

ログイン後にコピー

上記はブートストラップコンテンツに基づいた垂直アコーディオンアニメーション効果。その他の関連コンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。