js实现弹性拖拽堆叠堆积的图片进行幻灯片切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:js实现弹性拖拽堆叠堆积的图片进行幻灯片切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> @-webkit-keyframes animation{from{opacity:0; -webkit-transform:scale(1.2) rotateX(45deg);transform:scale(1.2) rotateX(45deg);} to{ }} @-webkit-keyframes animation2{from{opacity:0; -webkit-transform:scale(1.2) rotateX(45deg);transform:scale(1.2) rotateX(45deg);} to{ }} body { background:#1c1c1c; /*-webkit-perspective:1000px;*/ overflow:hidden; } .slider div p{color:#1c1c1c;position:absolute;bottom:-65px; font-family:font; font-size:14px;} .slider{ -webkit-animation:animation ease 1s;animation-delay:.8s;animation-fill-mode:backwards; margin:60px auto 0 auto; height:360px; width:240px; padding:40px; top:100px; perspective:1000px; transition:ease-in-out .2s; /*-webkit-transform:rotateX(45deg); -webkit-transform-style:preserve-3d; position:absolute;*/ } /*.slider:active{ -webkit-transform:rotateZ(10deg);}*/ .slide img { text-align:center;width:100%; height:100%; -webkit-user-drag:none;user-drag:none;-moz-user-drag:none; border-radius:2px; } .slide{ -webkit-user-select:none; user-select:none; -moz-user-select:none; position:absolute; height:280px; width:240px; box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3); background:#fcfcfc; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -moz-transform-style:preserve-3d; text-align:center; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0