gsap+Observer实现动态翻转翻页分页动画效果代码-html代码-BFW代码库

gsap+Observer实现动态翻转翻页分页动画效果代码

代码语言：html

所属分类：其他

代码描述：gsap+Observer实现动态翻转翻页分页动画效果代码

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

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

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
body {
	font-family: sans-serif;
	width:100%;
	height:100vh;
	margin:0;
	padding:0;
}

.vegetables {
	display: flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
}

.page {
	list-style: none;
	padding: 1.5em;
	background:#fff;
	min-height:40vh; 
	min-width:40vw;
	display: flex;
	flex-direction:column;
	align-items:center;
	justify-content: space-around;
	border-radius:5px;
}

.page li {
	font-size: 1.5em;	
}

.page-num {
	position:absolute;
	bottom:2em;
	font-size:1.1em;
	color:#fff
}

.nav {
	cursor:pointer;
	position:absolute;
	right:0;
	top:50%;
	transform:translateY(-50%);
/* 	mix-blend-mode:overlay; */
}

.navBtn:focus {
	outline: none;
}
</style>


  
</head>

<body>
  <div class="vegetables">
	<ul class="page">
		<li>Carrot</li>
		<li style="color:#ff6347">Tomato</li>
		<li>Broccoli</li>
		<li>Cucumber</li>
		<li>Spinach</li>
	</ul>
	<!-- Page 1 -->

	<ul class="page">
		<li>Potato</li>
		<li>Pepper</li>
		<li style="color:#8944bb">Eggplant</li>
		<li>Lettuce</li>
		<li>Onion</li>
	</ul>
	<!-- Page 2 -->

	<ul class="page">
		<li style="color:#80bc22">Zucchini</li>
		<li>Cauliflower</li>
		<li>Kale</li>
		<li>Cabbage</li>
		<li>Mushroom</li>
	</ul>
	<!-- Page 3 -->

	<ul class="page">
		<li>Asparagus</li>
		<li>Artichoke</li>
		<li style="color:#a42e41">Radish</li>
		<li>Beet</li>
		<li>Okra</li>
	</ul>
	<!-- Page 4 -->

	<ul class="page">
		<li>Brussels Sprouts</li>
		<li>Green Bean</li>
		<li style="color:#fc7604">Butternut Squash</li>
		<li>Turnip</li>
		<li>Chard</li>
	</ul>
	<!-- Page 5 -->
	
	<ul class="page">
		<li style="color:#ed9121">Carrot</li>
		<li>Tomato</li>
		<li>Broccoli</li>.........完整代码请登录后点击上方下载按钮下载查看