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