藤藤每日一练——Pure CSS3 Accordion Slider

Accordion Slider 以前都是使用jQury或别的js脚本来制作，今天我们给大家展示一个纯CSS3实现的水平手风琴幻灯片播放的效果。这个效果有两个关键之处，第一是HTML结构中的input[type="radio"]是必备的，第二是样式通过radio的选中与未选中来控制对应的img显示和隐藏。这里采用的是css的兄弟元素选择器（~），这个是一个很好的应用。当然实现这种效果还可以通过“target”来实现，不过这种方法实现要借助js来显示默认的第一张图片，有兴趣的可以将这个案例改装一下。

demodownload

HTML CODE

<ul class="main_promo clearfix" id="main_promo">
  <li>
    <input type="radio" name="radio-set" checked="checked"/>
    <div class="slide">
      <a href="#"><p>Slide One</p><strong>1</strong></a>
    </div>
    <div class="slide_img">
      <img src="img/img_01.jpg" alt="" />
    </div>
  </li>
  <li>
    <input type="radio" name="radio-set" />
    <div class="slide">
      <a href="#slide_two"><p>Slide Two</p><strong>2</strong></a>
    </div>
    <div class="slide_img">
      <img src="img/img_02.jpg" alt="" />
    </div>
  </li>
  <li>
    <input type="radio" name="radio-set" />
    <div class="slide">
      <a href="#slide_three"><p>Slide Three</p><strong>3</strong></a>
    </div>
    <div class="slide_img">
      <img src="img/img_03.jpg" alt="" />
    </div>
  </li>
  <li>
    <input type="radio" name="radio-set" />
    <div class="slide">
      <a href="#slide_four"><p>Slide Four</p><strong>4</strong></a>
    </div>
    <div class="slide_img">
      <img src="img/img_04.jpg" alt="" />
    </div>
  </li>
</ul>

CSS CODE

body {
  background-color: #f6f6f6;
}
.demo {
  width: 940px;
  margin: 40px auto 0;
}
.main_promo {
  border: 5px solid #3d3d3d;
  border-radius: 7px;
  box-shadow: 0 8px 16px rgba(0,0,0,.2);
  background-color: #1c1c1c;
}
.main_promo li {
  position: relative;
  float: left;
  padding: 5px 0 5px 6px;
  overflow: hidden;
}
.main_promo div {
  float: left;
}

.slide a {
  position: relative;
  z-index: 1;
  display: block;
  outline:none;
  width: 50px;
  height: 300px;
  border-radius: 5px;
  background-color: #303030;
  transition: all 0.3s ease-in;
}
.slide p {
  position: absolute;
  top: 30px;
  left: -25px;
  color: #ddd;
  height:20px;
  width: 100px;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(0,0,0,.8);
  word-break:break-all;
  transform: rotate(-90deg);
}
.slide strong {
  font-size: 30px;
  color: #191919;
  text-shadow: 0 1px 0 #454545;
  position: absolute;
  bottom: 15px;
  left: 15px;
}
.slide_img {
  overflow: hidden;
  width: 0;
  height: 0;
  transition: width 0.5s ease-in-out;
}
.slide_img img {
  width:  692px;
  height: 300px;
}
input[type="radio"] {
  position: absolute;
  left: 5px;
  z-index: 99;
  width: 50px;
  height: 300px;
  opacity: 0;
  cursor: pointer;
}
input:checked ~ .slide a {
  text-decoration: none;
  background:radial-gradient(circle,#434343,#303030);
}
input:checked ~ .slide_img {
  overflow: visible; 
  width:692px; 
  height:300px;  
  margin-left: 8px;
}

特别声明：从这个案例开始，我们所有的CSS3属性都省去其前缀“-moz”、“-webkit”、“-o”、“-ms”,而用改用了prefixfree脚本来实现。详细的使用方法可以点击这里。

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/css3-accordion-slider.html