vue+TweenMax实现6种页面过渡动画效果代码-html代码-BFW代码库

vue+TweenMax实现6种页面过渡动画效果代码

代码语言：html

所属分类：其他

代码描述：vue+TweenMax实现6种页面过渡动画效果代码

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

<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
	box-sizing:border-box
}
body {
	background:#202020;
	font-size:62.5%
}
#app {
	overflow:hidden;
	position:absolute;
	left:0;
	top:0;
	width:100vw;
	height:100vh;
	background:#4c4c4c;
	background:-webkit-gradient(left top,right bottom,color-stop(0%,#4c4c4c),color-stop(36%,rgba(43,43,43,0.74)),color-stop(71%,rgba(28,28,28,0.5)),color-stop(100%,rgba(19,19,19,0.29)));
	background:linear-gradient(135deg,#4c4c4c 0,rgba(43,43,43,0.74) 36%,rgba(28,28,28,0.5) 71%,rgba(19,19,19,0.29) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c",endColorstr="#131313",GradientType=1);
	color:#fff
}
.controls {
	position:absolute;
	left:50%;
	bottom:40px;
	transform:translate(-50%,0);
	width:100%;
	margin-top:30px;
	text-align:center;
	padding:0
}
.controls li {
	opacity:.6;
	cursor:pointer;
	overflow:hidden;
	display:inline-block;
	height:30px;
	margin:0 10px;
	padding:0 30px;
	border-radius:10px;
	font:.8rem/30px Arial,sans-serif;
	font-family:"Ubuntu",Helvetica,Arial,sans-serif;
	background:#505050
}
.controls li.active {
	background:#b6b6b6
}
.page {
	position:absolute;
	left:0;
	top:0;
	width:100vw;
	height:100vh;
	background:#c0c0c0
}
.page .center {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:100%;
	font-size:3rem;
	text-align:center
}
.page h1 {
	width:100%;
	margin:0;
	padding:0;
	font-family:"U.........完整代码请登录后点击上方下载按钮下载查看