[CSS3技术]Pure CSS3 Accordion Slider

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




 HTML CODE

 
[*]
 
 
 Slide One
1
 

 
 
 

 
[*]
 
 
 Slide Two
2
 

 
 
 

 
[*]
 
 
 Slide Three
3
 

 
 
 

 
[*]
 
 
 Slide Four
4
 

 
 
 

 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脚本来实现。

DEMO：
http://www.w3cplus.com/demo/css3/CSS3AccordionSlider/index.html

下载：CSS3AccordionSlider.zip





[/td][/tr]