純css手寫手風琴 -开发者知识库

純css手寫手風琴 -开发者知识库,第1张

---恢復內容開始---

 

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

下面是效果:

純css手寫手風琴 -开发者知识库,第2张

這是一種很有用的手風琴,而且可以不用任何的JavaScript和jQuery!!!

---恢復內容結束---

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复