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

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

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