CSS实现的图片缩进效果

@charset "utf-8";
/* CSS Document */

/*Now the styles*/
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, verdana, tahoma;
background-color: #ccc;
background-image: url(../.idea/pic/1.gif);
background-repeat: repeat;
}

/*时间申请手风琴工作宽度
图像= 640px下的宽度
总图像= 5
因此在图像的宽度= 640px
不悬停时在图像宽度= 40px -自己可以设置
所以集装箱总宽度= 640 + 40 * 4 = 800px；
默认宽度= 800 / 5 = 160px；

*/

.accordian {
width: 800px; height: 400px;
overflow: hidden;

/*Time for some styling*/
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);
}

/*A small hack to prevent flickering on some browsers*/
.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 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;

}

/*不悬停时减少的*/
.accordian ul:hover li {width: 40px;}
/*允许使用悬浮效果*/
/*li覆盖在ul*/
.accordian ul li:hover {width: 640px;}

.accordian li img {
display: block;
/*li标签分块*/
}

/*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: lightpink;
text-decoration: none;
padding: 20px;
font-size: 24px;
font-family: 华文楷体;
}

<div class="accordian">
<!--<embed src="../.idea/raw/tomorrow.mp3"autostart="true" loop="true" hidden="true" ></embed>-->
<ul>
<li>
<div class="image_title">
<a href="shoufengqin.html">眼睛长在底迪身上系列</a>
</div>
<a href="#">
<img src="../.idea/pic/1.png"  height="400px" width="640px"/>
</a>
</li>
<li>
<div class="image_title">
<a href="#">彼此的依靠</a>
</div>
<a href="#">
<img src="../.idea/pic/2.jpg" height="400px" width="640px"/>
</a>
</li>
<li>
<div class="image_title">
<a href="#">查呆萌和朱二狗</a>
</div>
<a href="#">
<img src="../.idea/pic/3.png" height="400px" width="640px"/>
</a>
</li>
<li>
<div class="image_title">
<a href="#">执手难离</a>
</div>
<a href="#">
<img src="../.idea/pic/4.png" width="640px" height="400px"/>
</a>
</li>
<li>
<div class="image_title">
<a href="#">“婚礼”</a>
</div>
<a href="#">
<img src="../.idea/pic/5.png" height="400px" width="640px"/>
</a>
</li>
</ul>
</div>
<audio id="audio" src="../.idea/raw/tomorrow.mp3" >您的浏览器不支持</audio>
<script>
var a=document.getElementById("audio");
//autoplay 属性设置或返回音视频是否在加载后即开始播放
a.autoplay=true;
//    loop 属性设置或返回音频/视频是否应该在结束时再次播放。
a.loop=true;
//去掉 controls 属性就可以隐藏
</script>

附四种添加音乐方法
html5方法一：<audio autoplay="" loop=""><source src="http://mi.0w0.im/Letter_Song.mp3"></audio>不显示播放器。
html5方法二：<video controls="" autoplay="" name="media"><source src="我是音乐" type="audio/mpeg"></video>会显示播放器。
方法三：支持所有播放器：<embed src="/uploadfile/m.mp3" autostart="true" loop="true" hidden="true"></embed>我使用的此方法。
方法四：<bgsound src=背景音乐地址 loop=-1>