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

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

代码语言：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 e.........完整代码请登录后点击上方下载按钮下载查看