纯css+div实现图片幻灯片效果代码-html代码-BFW代码库

纯css+div实现图片幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：纯css+div实现图片幻灯片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <style>
        * {
          box-sizing: border-box;
        }
        
        body {
          background:rgba(133,200,197);
        }
        
        /* Basic Slider Styles */
        /* ================================== */
        
        .container {
          position: relative;
          width: 900px;
          height: 400px;
          margin: 60px auto 0;
          font: 1em 'Rationale', sans-serif;
        }
        
        .container > input { display: none }
        
        .slider, .img {
          width: inherit;
          height: inherit;
        }
        
        .slider {
          position: relative;
          overflow: hidden;
          background-color: #000;
          border: 8px solid #eee;
          border-radius: 5px;
          box-shadow: 0 7px 20px rgba(0,0,0,.5);
        }
        
        .img {
          position: absolute;
          margin-left: -8px;
          perspective: 500px;
        }
        
        .img1 .frag { background-image: url(//repo.bfw.wiki/bfwrepo/image/627ef07191c49.png) }
        .img2 .frag { background-image: url(//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png) }
        .img3 .frag { background-image: url(//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png)}
        .img4 .frag { background-image: url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png) }
        .img5 .frag { background-image: url(//repo.bfw.wiki/bfwrepo/image/60ece322d6263.png) }
        .img6 .frag { background-image: url(//repo.bfw.wiki/bfwrepo/image/625e10c281dc9.png) }
        
        .frag {
          width: 150px;
          height: inherit;
          float: left;
          opacity: 0;
          z-index: 0;
          
          transform-origin: center right;
          transform: rotateY(90deg) translateZ(-100px) scale(1.5);
    .........完整代码请登录后点击上方下载按钮下载查看