純css手寫手風琴
阿新 • • 發佈:2017-08-11
span 12px 旋轉 16px toggle ebo top asa 純c
---恢復內容開始---
在網頁中我們經常會遇到手風琴效果,之前經常會用jQuery和JavaScript來寫,但今天給大家介紹一種用純css寫的手風琴。
下面是html部分:
1 <div class="togglebox"> 2 <input id="toggle1" type="radio" name="toggle" checked="checked" /> <!--checked="checked"添加默認展開樣式--> 3 <label for="toggle1">Pure CSS Accordion</label> 4 <section id="content1"> 5 <p> 6 Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulde r bresaola.Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. 7 </p> 8<p> 9 Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare rib s pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison. 10 </p> 11 </section> 12 <input id="toggle2"type="radio" name="toggle" /> 13 <label for="toggle2">Pure CSS Accordion</label> 14 <section id="content2"> 15 <p> 16 Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulde r bresaola.Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. 17 </p> 18 <p> 19 Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare rib s pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison. 20 </p> 21 </section> 22 <input id="toggle3" type="radio" name="toggle" /> 23 <label for="toggle3">Pure CSS Accordion</label> 24 <section id="content3"> 25 <p> 26 Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulde r bresaola.Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. 27 </p> 28 <p> 29 Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare rib s pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison. 30 </p> 31 </section> 32 <input id="toggle4" type="radio" name="toggle" /> 33 <label for="toggle4">Pure CSS Accordion</label> 34 <section id="content4"> 35 <p> 36 Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulde r bresaola.Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. 37 </p> 38 <p> 39 Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare rib s pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison. 40 </p> 41 </section> 42 </div>
下面是css樣式:
<style type="text/css"> * { margin: 0; padding: 0; } *,*:before, *:after { box-sizing: border-box; } html,body { height: 100%; font: 16px/1 ‘Open Sans‘, sans-serif; color: #555; background: #e5e5e5; } body { padding: 50px; } .togglebox { width: 400px; margin: 0 auto; background: #fff; transform: translateZ(0); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } input[type="radio"] { position: absolute; opacity: 0; } label { position: relative; display: block; height: 50px; line-height: 50px; padding: 0 20px; font-size: 14px; font-weight: 700; border-top: 1px solid #ddd; background: #fff; cursor: pointer; background: palegreen; } label[for*=‘1‘] { border: 0; } label:after { content: ‘<‘; /*在label之後 加一個下拉圖標*/ position: absolute; top: 0px; right: 20px; transition: .3s transform; } section { height: 0; /*未被選中之前section高度為0*/ transition: .3s all; overflow: hidden; } #toggle1:checked~label[for*=‘1‘]:after, #toggle2:checked~label[for*=‘2‘]:after, #toggle3:checked~label[for*=‘3‘]:after, #toggle4:checked~label[for*=‘4‘]:after { /*單選框點擊選中以後 圖標旋轉-90度*/ transform: rotate(-90deg); } #toggle1:checked~#content1, #toggle2:checked~#content2, #toggle3:checked~#content3, #toggle4:checked~#content4 { height: 200px; /*單選框未被選中內容高度為0,單選框選中之後內容高度為200*/ } p { margin: 15px 0; padding: 0 20px; font-size: 12px; line-height: 1.5; } </style>
下面是效果:
這是一種很有用的手風琴,而且可以不用任何的JavaScript和jQuery!!!
---恢復內容結束---
純css手寫手風琴