纯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/627ef07191c.........完整代码请登录后点击上方下载按钮下载查看