gsap实现卡片轮换效果代码-html代码-BFW代码库

gsap实现卡片轮换效果代码

代码语言：html

所属分类：幻灯片

代码描述：gsap实现卡片轮换效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* {
	box-sizing: border-box;
}
body {
	background: #111;
	min-height: 100vh;
	padding: 0;
	margin: 0;
}
.gallery {
	position: absolute;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.cards {
	position: absolute;
	width: 14rem;
	height: 18rem;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.cards li {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 14rem;
	height: 18rem;
	text-align: center;
	line-height: 18rem;
	font-size: 2rem;
	font-family: sans-serif;
	background-color: #9d7cce;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 0.8rem;
}

.actions {
	position: absolute;
	bottom: 25px;
	left: 50%;
	transform: translateX(-50%);
}

button {
  display:inline-block;
  outline: none;
  border: none;
  padding: 8px 14px;
  background: #414141;
  background-image: -webkit-linear-gradient(top, #575757, #414141);
  background-image: -moz-linear-gradient(top, #575757, #414141);
  background-image: -ms-linear-gradient(top, #575757, #414141);
  background-image: -o-linear-gradient(top, #575757, #414141);
  background-image: linear-gradient(to bottom, #575757, #414141);
  text-shadow: 0px 1px 0px #414141;
  -webkit-box-shadow: 0px 1px 0px 414141;
  -moz-box-shadow: 0px 1px 0px 414141;
  box-shadow: 0px 1px 0px 414141;
  color: #ffffff;
  text-decoration: no.........完整代码请登录后点击上方下载按钮下载查看