一天一个小页面(2)

手风琴特效图片轮播

1、效果图

2、思路

1. 一个div嵌套创建一个ul>li*4
2. 实现字体垂直排列：
   ——用一个div包裹他，宽得和图片最小化时的宽度一致；
   ——再设置他的margin就行
3. 实现鼠标移动到图片滑动显示整个图片效果 ：
   ——用js对li：hover伪类绑定一个animation动画
4. 实现第三步后会发现如果快速滑动鼠标在四个图片上时第四个图片会下移到下面
   ——原因：animation动画是一帧一帧进行动画播放的，多个页面滑动时会造成li的宽度 溢出ul的宽度。
   ——解决办法：给ul和li的width设置120%

3、代码

代码连接