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

代码语言：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);
          transition: transform .6s, opacity .6s, -webkit-filter 2s ease-out;
          -webkit-filter: saturate(0) blur(10px) brightness(.4) contrast(4);
        }
        
        /* Individual fragments */
        /* ================================== */
        
        .img .frag2 {
          background-position: -150px 0;
          transition-delay: .2s;
        }
        .img .frag3 {
          background-position: -300px 0;
          transition-delay: .4s;
        }
        .img .frag4 {
          background-position: -450px 0;
          transition-delay: .6s;
        }
        .img .frag5 {
          background-position: -600px 0;
          transition-delay: .8s;
        }
        .img .frag6 {
          background-position: -750px 0;
          transition-delay: 1s;
        }
        
        #slide1:checked ~ .slider .img1 .frag,
        #slide2:checked ~ .slider .img2 .frag,
        #slide3:checked ~ .slider .img3 .frag,
        #slide4:checked ~ .slider .img4 .frag,
        #slide5:checked ~ .slider .img5 .frag,
        #slide6:checked ~ .slider .img6 .frag {
          opacity: 1;
          z-index: 1;
          transform: rotateY(0) translateZ(0) scale(1);
          -webkit-filter: saturate(1) blur(0) brightness(1) contrast(1);
        }
        
        /* Controls */
        /* ================================== */
        
        .controls {
          position: absolute;
          bottom: -50px;
          left: 50%;
          margin-left: -115px;
        }
        
        .controls label {
          display: block;
          height: 10px;
          width: 30px;
          float: left;
          margin-right: 10px;
          cursor: pointer;
          background-color: #000;
          opacity: .2;
          transition: opacity .5s;
        }
        
        .controls label:hover,
        .side-controls label:hover,
        #slide1:checked ~ .controls label:nth-of-type(1),
        #slide2:checked ~ .controls label:nth-of-type(2),
        #slide3:checked ~ .controls label:nth-of-type(3),
        #slide4:checked ~ .controls label:nth-of-type(4),
        #slide5:checked ~ .controls label:nth-of-type(5),
        #slide6:checked ~ .controls label:nth-of-type(6){
          opacity: .8;
        }
        
        /* Side Controls */
        /* ================================== */
        
        .side-controls label {
          position: absolute;
          display: block;
          border-top: 30px solid transparent;
          border-bottom: 30px solid transparent;
          top: 50%;
          margin-top: -15px;
          cursor: pointer;
          transition: opacity .5s; 
          opacity: .2;
        }
        
        #slide1:checked ~ .side-controls label:nth-of-type(6),
        #slide2:checked ~ .side-controls label:nth-of-type(1),
        #slide3:checked ~ .side-controls label:nth-of-type(2),
        #slide4:checked ~ .side-controls label:nth-of-type(3),
        #slide5:checked ~ .side-controls label:nth-of-type(4),
        #slide6:checked ~ .side-controls label:nth-of-type(5) {
          border-right: 40px solid #000;
          left: -40px;
        }
        
        #slide1:checked ~ .side-controls label:nth-of-type(2),
        #slide2:checked ~ .side-controls label:nth-of-type(3),
        #slide3:checked ~ .side-controls label:nth-of-type(4),
        #slide4:checked ~ .side-controls label:nth-of-type(5),
        #slide5:checked ~ .side-controls label:nth-of-type(6),
        #slide6:checked ~ .side-controls label:nth-of-type(1) {
          border-left: 40px solid #000;
          right: -40px;
        }
        
        /* Captions */
        /* ================================== */
        
        .captions > div {
          position: absolute;
          bottom: 7px.........完整代码请登录后点击上方下载按钮下载查看