用css3 html js 制作弹性拖动滑块切换图片展示cid1118-网页设计教程

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
    
    <style>
    
 

body {
   background: #158cdf;
           /*-webkit-perspective:1000px;*/
           overflow:hidden;
    font-family: 'Roboto Condensed', sans-serif;
    cursor: zoom-in;
    text-transform: uppercase;
     
 
}

.slider div p{
         color:#fff;
         position:absolute;
         bottom:-55px; 
          font-family: arial;
    letter-spacing: 1px;
          font-size:18px;
          font-weight: bold;
        margin-left: 20px;
        }
.slider{

     -webkit-animation:animation ease 1s;animation-delay:.8s;animation-fill-mode:backwards;
 

    margin:60px auto 0 auto;
    height:600px;
    width:400px;
    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%;   -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:400px;
    width:400px;

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;
             /*overflow:hidden;*/
             border:12px white solid;
             box-sizing:border-box;
             border-bottom:55px white solid;
             border-radius:5px;


    
}
.transition {
     -webkit-transition: cubic-bezier(0,1.95,.49,.73) .4s ;
   -moz-transition: cubic-bezier(0,1.95,.49,.73) .4s ;
      transition: cubic-bezier(0,1.95,.49,.73) .4s ;
}





    
    
    </style>
</head>
<body>
  
    <div class="slider">
        <div class="slide" ><img src="1.jpg" /><p>JHONSON </p></div>
        <div class="slide"><img src="2.jpg" /><p>BEBONAD</p></div>
        <div class="slide"><img src="3.jpg" /><p>KARAIOKE</p></div>
        <div class="slide" ><img src="4.jpg" /><p>ROHANDSON</p></div>
    </div>
    <script src="elasitc.js">
   
    
    </script>
</body> 
</html>

在线演示

让链接同时具备两种打开方式