当前位置: 秋叶网络博客 前端编程 ◊ 纯css3自制简单手风琴特效

纯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>

代码在线演示:

code代码运行图标以下是程序代码

提示:可以先修改部分代码再运行

后面我用了一段js主要是处理兼容ie下最后一张图片的hover特效,如不需要兼容,可以不用js。总体的原理是给li设置宽度小于给图片设置的宽度,这样图片有一部分就被层叠而看不到,注意必须设置图片的position为absolute,且不可设置top和left值。然后hover下让其的margin-left值为-100px,为了得到动画效果,用css3的transition属性all 1s ease-in。

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/381.html
目录: 前端编程 | 标签: 手风琴特效 | 10242次阅读