纯div+css实现大气过渡幻灯片效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：纯div+css实现大气过渡幻灯片效果代码，没有一行js代码就能实现这效果。

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

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

<head>
  <meta charset="UTF-8">

  

<style>
* {
  box-sizing: border-box;
}

body {
  background-image: url(https://www.toptal.com/designers/subtlepatterns/uploads/restaurant.png);
}

/* 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/random/900x500/景色) }
.img2 .frag { background-image: url(//repo.bfw.wiki/random/900x500/风景) }
.img3 .frag { background-image: url(//repo.bfw.wiki/random/900x500/海) }
.img4 .frag { background-image: url(//repo.bfw.wiki/random/900x500/山) }
.img5 .frag { background-image: url(//repo.bfw.wiki/random/900x500/学) }
.img6 .frag { background-image: url(//repo.bfw.wiki/random/900x500/景色) }

.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;
  right: 20px;
  font-size: 3em;
  color: transparent;
  text-transform: uppercase;
  text-shadow: 0 0 60px transparent;
  transition: text-shadow 2s;
  z-index: 0;
}

#slide2:checked ~ .slider .captions .c2,
#slide3:checked ~ ..........完整代码请登录后点击上方下载按钮下载查看