手风琴式相册

《html》

<div class='accordion'>
<ul>
<li><img src='images/1.jpg'></li>
<li><img src='images/2.jpg'></li>
<li><img src='images/3.jpg'></li>
<li><img src='images/4.jpg'></li>
<li><img src='images/5.jpg'></li>
</ul>
</div>

<css>

* {
margin:0;
padding:0;
list-style:none;
}
body{
background:#F5DBDB;
}
.accordion {
width:805px;
height:320px;
overflow:hidden;
margin:80px auto;
box-shadow:0 0 10px 2px; /* (水平 垂直阴影 模糊程度 阴影范围) 外部大边框的阴影*/
}
.accordion li{
width:160px;
height:320px;
float:left;
border-left:1px solid #aaa; /*#aaa白色*/
box-shadow:0 0 25px 10px rgba(0,0,0,0.4); /* 图片与图片之间有阴影*/
transition:0.5s;
}
.accordion ul:hover li{
width:40px;
}
.accordion ul li:hover{ /* 鼠标覆在图片上时宽度变为图片原本的宽度 */
width:640px;
}

转载于:https://www.cnblogs.com/ZHAOcong31/p/7407083.html