手风琴式滑块CSS3，实测分享

手风琴效果其实并不罕见。但是在CSS3问世之前，我们都需要通过JS来实现这种动态效果。

css3问世后，这种效果已经不需要臃肿的JS来实现，可以由浏览器直接完成，直接提升了运行效率和稳定性。

下面给大家分享实测后的效果吧。

代码实测：

html代码部分：

<div class="accordian">
<ul>
<li>
<div class="image_title">
<a href="#">KungFu Panda</a>
</div>
<a href="#">
<img src="/static/Uploads/wp/2012/11/3yiC6Yq.jpg"/>
</a>
</li>
<li>
<div class="image_title">
<a href="#">Toy Story 2</a>
</div>
<a href="#">
<img src="/static/Uploads/wp/2012/11/40Ly3VB.jpg"/>
</a>
</li>
<li>
<div class="image_title">
<a href="#">Wall-E</a>
</div>
<a href="#">
<img src="/static/Uploads/wp/2012/11/00kih8g.jpg"/>
</a>
</li>
<li>
<div class="image_title">
<a href="#">Up</a>
</div>
<a href="#">
<img src="/static/Uploads/wp/2012/11/2rT2vdx.jpg"/>
</a>
</li>
<li>
<div class="image_title">
<a href="#">Cars 2</a>
</div>
<a href="#">
<img src="/static/Uploads/wp/2012/11/8k3N3EL.jpg"/>
</a>
</li>
</ul>
</div>

CSS3部分：

* {
margin: 0;
padding: 0;
}
body {
background: #ccc;
font-family: arial, verdana, tahoma;
}

/*手风琴的参数规划
图像宽度=640px
图片总数= 5
hover触发的宽度=640px
hover以外的图片=40px的宽度 - 设置任意宽度
手风琴的总宽度= 640+ 40 *4 =800px;
默认宽度= 800/5=160px;
*/
.accordian {
width: 805px; height: 320px;
overflow: hidden;

margin: 100px auto;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

/*加上一些hack防止某些浏览器出现闪烁问题*/
.accordian ul {
width: 2000px;
/*设置足够的宽度，以便于整体图片的来回移动.*/
}

.accordian li {
position: relative;
display: block;
width: 160px;
float: left;

border-left: 1px solid #888;

box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

/*动画转换效果*/
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
/*现在把鼠标悬停在图像上，可以看到基本的手风琴效果了*/
}

.accordian ul:hover li {width: 40px;}
.accordian ul li:hover {width: 640px;}
.accordian li img {
display: block;
}

/*Image title styles*/
.image_title {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0; bottom: 0;
width: 640px;

}
.image_title a {
display: block;
color: #fff;
text-decoration: none;
padding: 20px;
font-size: 16px;
}