纯CSS3制作的垂直手风琴效果
CSS代码：
@import url("css/font-awesome.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;
}
label[for*='1'] {
border: 0;
}
label:after {
content: '\f078';
position: absolute;
top: 0px;
right: 20px;
font-family: fontawesome;
transform: rotate(90deg);
transition: .3s transform;
}
section {
height: 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 {
transform: rotate(0deg);
}
#toggle1:checked ~ #content1,
#toggle2:checked ~ #content2,
#toggle3:checked ~ #content3,
#toggle4:checked ~ #content4 {
height: 200px;
}
p {
margin: 15px 0;
padding: 0 20px;
font-size: 12px;
line-height: 1.5;
}
页面代码：
<div class="togglebox">
<input id="toggle1" type="radio" name="toggle" />
<label for="toggle1">网页设计概念</label>
<section id="content1">
<p>
<img src="http://www.125jz.com/wp-content/uploads/2018/11/logo.png" alt="中国网页设计"/></p>
<p>网页设计（web design，又称为Web UI design，WUI design，WUI），是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。 </p>
</section>
<input id="toggle2" type="radio" name="toggle" />
<label for="toggle2">网页设计分类</label>
<section id="content2">
<p>
网页设计一般分为三种大类：功能型网页设计（服务网站&B/S软件用户端）、形象型网页设计（品牌形象站）、信息型网页设计（门户站）。设计网页的目的不同，应选择不同的网页策划与设计方案。
</p>
</section>
<input id="toggle3" type="radio" name="toggle" />
<label for="toggle3">网页设目标</label>
<section id="content3">
<p>
网页设计的工作目标，是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的视听感受。
</p>
</section>
</div>
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3025.html
微信扫一扫 
支付宝扫一扫