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