**html+css+css3实现手风琴效果**

										**实现手风琴效果**

直接进入主题：
第一步，先把图片加载进去：

第二步，写样式

		.main{
			margin: 0;
			padding: 0;
			width: 1200px;
			height: 150px;
			margin: 200px auto;
			background-color: wheat;
			overflow: hidden;		/*超出部分隐藏*/
		}
		ul{
			padding: 0;
			margin: 12.5px 0 0 40px;
			list-style: none;
			width: 2000px;
			height: 125px;
		}
		li{
			width: 1200px;
			height: 125px;
			overflow: hidden;
			float: left;	
			transition: .5s ;	/*过渡*/
		}

注：图片的横排，使用display: inline-block；也是可以的实现效果的
第三步：效果实现
这里需要一个重要的伪类：hover

		ul:hover li{width: 105px;}/*当鼠标经过ul时，li宽度缩小*/
		ul li:hover{width: 600px;}/*当鼠标经过li时，li宽度增大*/

如果想实现“回弹一下”的效果，那就在过渡后面加入cubic-bezier(.29,1.21,.52,1.46)；后面的数字自己去这个网站（https://cubic-bezier.com）调。
代码很多不规范的地方请谅解，我会努力改进。
完整代码