純css手寫手風琴

標籤：ram   content   res   san   有用   int   http   結束   wine   

---恢複內容開始---

 

　　在網頁中我們經常會遇到手風琴效果，之前經常會用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手寫手風琴