纯CSS手风琴选项卡

来源:https://www.sucaihuo.com/js/2307.html 2017-07-04 20:02浏览(1204) 收藏

一款纯CSS手风琴选项卡,有两种效果:一种是既可展开也可伸缩的效果,另一种是只能展开不能收缩的效果,可以自由控制显示的宽度比例、颜色样式等等,喜欢童鞋的就收下吧。
纯CSS手风琴选项卡
分类:导航菜单 > 下拉导航 难易:入门级
查看演示 下载资源 下载积分: 30 积分

页面的head部分只有CSS样式,相对比较简单,就直接提供代码了:

body {
  color: #2c3e50;
  background: #ecf0f1;
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
h1 {
  text-align: center;
  font-size: 30px;
}
.half {
  margin-left: 20%;
  width: 60%;
  padding: 0 1em;
}
/* Acordeon styles */
.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #fff;
  overflow: hidden;
}
input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #16a085;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}
.blue label {
  background: #2980b9;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  background: #1abc9c;
  -webkit-transition: max-height .35s;
  transition: max-height .35s;
}
.blue .tab-content {
  background: #3498db;
}
.tab-content p {
  margin: 1em;
}
/* :checked */
input:checked ~ .tab-content {
  max-height: 10em;
}
/* Icon */
label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  transition: all .35s;
}
input[type=checkbox] + label::after {
  content: "+";
}
input[type=radio] + label::after {
  content: "\25BC";
}
input[type=checkbox]:checked + label::after {
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

页面的body部分设置好两种效果的容器,可以自由添加class为tab的div增加选项,代码如下:

<div class="wrapper">
  <h1>纯CSS手风琴选项卡</h1>
  
  <div class="half">
    <p>可展开 <strong>可收缩</strong></p>
    <div class="tab">
      <input id="tab-one" type="checkbox" name="tabs">
      <label for="tab-one">第一步、要求</label>
      <div class="tab-content">
        <p>第一个阶段,是做出要求,对宇宙发出指令,让宇宙了解你想要些什么,宇宙就会自动回应你的想法。</p>
      </div>
    </div>
    <div class="tab">
      <input id="tab-two" type="checkbox" name="tabs">
      <label for="tab-two">第二步、信念</label>
      <div class="tab-content">
        <p>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念,就是我的说法,要相信还没有实现的事,“你的愿望就是我的命令”,宇宙就会开始运作安排,从而满足你心中的愿望。</p>
      </div>
    </div>
    <div class="tab">
      <input id="tab-three" type="checkbox" name="tabs">
      <label for="tab-three">第三步、接受</label>
      <div class="tab-content">
        <p>第三步,就是这个过程最后一步,接受。开始感觉好极了,想想要是你想要的事物已经出现,那会是什么感觉。</p>
      </div>
    </div>
  </div>
  
  <div class="half">
    <p>仅可 <strong>展开</strong></p>
    <div class="tab blue">
      <input id="tab-four" type="radio" name="tabs2">
      <label for="tab-four">把宇宙当成一本货物的目录</label>
      <div class="tab-content">
        <p>这是一个很有意思的过程,就好比把宇宙当成一本货物的目录,你翻着它,然后决定“我要经历这个,我要那种东西,我要跟那种人一起生活”,你就是那个跟宇宙下订单的人。其实就是这样简单。</p>
      </div>
    </div>
    <div class="tab blue">
      <input id="tab-five" type="radio" name="tabs2">
      <label for="tab-five">要相信还没有实现的事</label>
      <div class="tab-content">
        <p>大多数的时候,假如我们要求的事物没有出现在生活中,我们会感到沮丧和失望,我们甚至会开始怀疑,这种怀疑会让人感到心灰意冷。接受这个感觉,然后用坚定的信念代替它:“我知道……我知道……我知道……,它就要实现了。”</p>
      </div>
    </div>
    <div class="tab blue">
      <input id="tab-six" type="radio" name="tabs2">
      <label for="tab-six">把自己和你要的事物放在同一个频率上</label>
      <div class="tab-content">
        <p>当你感觉好的时候,你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事,帮助自己具有拥有它们的感觉。无论你能做什么,只要去做,就有助于把这些东西吸引过来。</p>
      </div>
    </div>
  </div>
</div>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2