js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > css样式

CSS3实现手风琴叠加图片自动轮播特效

发布时间:2015-09-08 20:47:01    您是第0位浏览者

本js特效代码兼容:ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

CSS3实现手风琴叠加图片自动轮播特效
*{padding:0;margin:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

/*五张图片在缩略图时所显示的位置调整*/
#demo li:nth-of-type(1) img{ transform: translate(-210px);}
#demo li:nth-of-type(2) img{ transform: translate(-180px);}
#demo li:nth-of-type(3) img{ transform: translate(-380px);}
#demo li:nth-of-type(4) img{ transform: translate(-450px);}
#demo li:nth-of-type(5) img{ transform: translate(-320px);}

#demo{width:1160px;height:512px;margin:60px auto 0 auto;}
#demo img{width: 820px; height: 512px; max-width: 820px;}
#demo li{float:left;position:relative;width:82px;height:100%;overflow:hidden;cursor:pointer; transition:0.5s; transform-origin:bottom;filter:alpha(opacity=50);opacity:0.5;}
#demo li img{transition:1.2s;}
#demo li a{display:block;}
#demo li div{position:absolute;bottom:0;left:0;width:100%;background:#000;line-height:32px;filter:alpha(opacity=70);opacity:0.7;text-indent:2em;}
#demo li div a{color:#FFF;text-decoration:none;}
#demo li div a:hover{color:#F00;text-decoration:none;}
#demo li.active{cursor:pointer; transform:scale(1.02,1.08); z-index:3;width:820px;filter:alpha(opacity=100);opacity:1;}
#demo li.active img{transform:translate(0px);}
#demo li:nth-of-type(1){transform-origin:bottom left;}
#demo li:nth-of-type(5){transform-origin:bottom right;}



图片叠加 图片轮播 图片层叠 手风琴

jQuery实现图片叠加点击轮换图片特效代码

html5带倒影3D图片叠加幻灯片轮播切换js特效

jquery图片插件制作图片叠加轮播旋转切换特效代码

jquery.slider多种过渡效果的图片轮播幻灯片特效

js仿微运5.0网站全屏图片轮播特效

jquery仿华谊兄弟首页3D图片轮播特效

jquery实现选项卡形式,四屏焦点图片轮播特效,带控制的选项卡轮播

jquery 3D图片轮播效果

jquery仿hao123带新闻标题图片轮播滚动特效代码