纯css3自制简单手风琴特效
作者：秋了秋 发表时间：2015年08月20日
传统的手风琴特效是用js来写的，然而我发现纯css3即可做到这种效果，减少js以提高网页加载速度。 css代码：
*{margin:0;padding:0;}
li{list-style:none;}
.photo li{float:left;width:15%;height:592px;}
.photo li img{
width:305px;
height:592px;
position:absolute;margin-left:1px;
-moz-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;}
.photo li img:hover{margin-left:-100px;}
html代码：
<div><ul class="photo"> <li><img src="(1).jpg"></li> <li><img src="(2).jpg"></li> <li><img src="(3).jpg"></li> <li><img src="(4).jpg"></li> <li><img src="(5).jpg"></li> <li><img src="(6).jpg"></li> </ul></div>
代码在线演示：
后面我用了一段js主要是处理兼容ie下最后一张图片的hover特效，如不需要兼容，可以不用js。总体的原理是给li设置宽度小于给图片设置的宽度，这样图片有一部分就被层叠而看不到，注意必须设置图片的position为absolute，且不可设置top和left值。然后hover下让其的margin-left值为-100px，为了得到动画效果，用css3的transition属性all 1s ease-in。
0
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/381.html