jquery实现大气图文幻灯片切换过渡效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：jquery实现大气图文幻灯片切换过渡效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        html {
	box-sizing:border-box
}
*,*:before,*:after {
	box-sizing:inherit;
	margin:0;
	padding:0
}
.cont {
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	height:100vh;
	background-image:linear-gradient(to left bottom,#F2E3C6 0,#A7A1A5 100%);
	overflow:hidden
}
.app {
	position:relative;
	min-width:850px;
	height:540px;
	box-shadow:0 0 60px rgba(0,0,0,0.3);
	overflow:hidden
}
.app__bgimg {
	position:absolute;
	top:0;
	left:-2.5%;
	width:105%;
	height:100%;
	transition:transform 3.5s 770ms
}
.app__bgimg-image {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0
}
.app__bgimg-image--1 {
	background:url("//repo.bfw.wiki/bfwrepo/image/6072a187c5fd6.png") center center no-repeat;
	background-size:cover
}
.app__bgimg-image--2 {
	background:url("//repo.bfw.wiki/bfwrepo/image/5fe5a2a479c12.png") center center no-repeat;
	background-size:cover;
	opacity:0;
	transition:opacity 0ms 1300ms;
	will-change:opacity
}
.app__text {
	position:absolute;
	right:165px;
	top:150px;
	font-family:"Roboto",sans-serif;
	text-transform:uppercase;
	z-index:1
}
.app__text-line {
	transition:transform 1500ms 400ms,opacity 750ms 500ms;
	will-change:transform,opacity;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}
.app__text-line--4 {
	transition:transform 1500ms 1500ms,opacity 1500ms 1500ms
}
.app__text-line--3 {
	transition:transform 1500ms 1600ms,opacity 1500ms 1750ms
}
.app__text-line--2 {
	transition:transform 1500ms 1700ms,opacity 1500ms 2000ms
}
.app__text-line--1 {
	transition:transform 1500ms 1800ms,opacity 1500ms 2250ms
}
.app__text-line--4 {
	font-size:50px;
	font-weight:700;
	color:#0A101D
}
.app__text-line--3 {
	font-size:40px;
	font-weight:300
}
.app__text-line--2 {
	margin-top:10px;
	font-size:14px;
	font-weight:500;
	color:#09C
}
.app__text-line--1 {
	margin-top:15px
}
.app__text-line--1 img {
	width:50px
}
.app__text--1 .app__text-line {
	transform:translate3d(0,-125px,0);
	opacity:0
}
.app__text--2 {
	right:initial;
	top:250px;
	left:80px;
	z-index:-1;
	transition:z-index 1500ms
}
.app__text--2 .app__text-line--4 {
	opacity:0;
	transition:transform 1500ms -75ms,opacity 400ms 125ms
}
.app__text--2 .app__text-line--3 {
	opacity:0;
	transition:transform 1500ms 0ms,opacity 400ms 200ms
}
.app__text--2 .app__text-line--2 {
	opacity:0;
	transition:transform 1500ms 75ms,opacity 400ms 275ms
}
.app__text--2 .app__text-line--1 {
	opacity:0;
	transition:transform 1500ms 150ms,opacity 400ms 350ms
}
.app__img {
	position:absolute;
	transform:translate3d(0,-750px,0);
	width:850px;
	height:100%;
	transition:transform 3s cubic-bezier(0.6,0.13,0.31,1.02);
	will-change:transform
}
.app__img img {
	min-width:100%;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}
.initial .app__img {
	transform:translate3d(0,0,0)
}
.initial .app__text--1 .app__text-line--1 {
	transform:translate3d(0,0,0);
	transition:transform 1500ms 1400ms,opacity 400ms 1600ms;
	opacity:1
}
.initial .app__text--1 .app__text-line--2 {
	transform:translate3d(0,0,0);
	transition:transform 1500ms 1475ms,opacity 400ms 1675ms;
	opacity:1
}
.initial .app__text--1 .app__text-line--3 {
	transform:translate3d(0,0,0);
	transition:transform 1500ms 1550ms,opacity 400ms 1750ms;
	opacity:1
}
.initial .app__text--1 .app__text-line--4 {
	transform:translate3d(0,0,0);
	transition:transform 1500ms 1625ms,opacity 400ms 1825ms;
	opacity:1
}
.active .app__bgimg {
	transform:translate3d(10px,0,0) scale(1.05);
	transition:transform 5s 850ms ease-in-out
}
.active .app__bgimg .app__bgimg-image--2 {
	opacity:1;
	transition:opacity 0ms 1500ms
}
.active .app__img {
	transition:transform 3s cubic-bezier(0.6,0.13,0.31,1.02);
	transform:translate3d(0,-1410px,0)
}
.active .app__text--1 {
	z-index:-1;
	transition:z-index 0ms 1500ms
}
.active .app__text--1 .app__text-line--1 {
	transform:translate3d(0,-125px,0);
	transition:transform 1500ms 300ms,opacity 400ms 500ms;
	opacity:0
}
.active .app__text--1 .app__text-line--2 {
	transform:translate3d(0,-125px,0);
	transition:transform 1500ms 375ms,opacity 400ms 575ms;
	opacity:0
}
.active .app__text--1 .app__text-line--3 {
	transform:translate3d(0,-125px,0);
	transition:transform 1500ms 450ms,opacity 400ms 650ms;
	opacity:0
}
.active .app__text--1 .app__text-line--4 {
	transform:translate3d(0,-125px,0);
	transition:transform 1500ms 525ms,opacity 400ms 725ms;
	opacity:0
}
.active .app__text--2 {
	z-index:1
}
.active .app__text--2 .app__text-line--1 {
	transform:translate3d(0,-125px,0);
	transition:transform 2500ms 1100ms,opacity 1300ms 1300ms;
	opacity:1
}
.active .app__text--2 .app__text-line--2 {
	transform:translate3d(0,-125px,0);
	transition:transform 2500ms 1175ms,opacity 1300ms 1575ms;
	opacity:1
}
.active .app__text--2 .app__text-line--3 {
	transform:translate3d(0,-125px,0);
	transition:transform 2500ms 1250ms,opacity 1300ms 1850ms;
	opacity:1
}
.active .app__text--2 .app__text-line--4 {
	transform:translate3d(0,-125px,0);
	transition:transform 2500ms 1325ms,opacity 1300ms 2125ms;
	opacity:1
}
.mouse {
	position:relative;
	margin-right:20px;
	min-width:50px;
	height:80px;
	border-radius:30px;
	border:5px solid rgba(255,255,255,0.8)
}
.mouse:after {
	content:"";
	position:absolute;
	top:20px;
	left:50%;
	transform:translate(-50%,0);
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:#fff;
	-webkit-animation:scroll 1s infinite alternat.........完整代码请登录后点击上方下载按钮下载查看