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