gsap+GSDevTools3实现摩天轮缆车转动动画效果代码

代码语言:html

所属分类:动画

代码描述:gsap+GSDevTools3实现摩天轮缆车转动动画效果代码

代码标签: gsap GSDevTools3 摩天轮 缆车 转动 动画

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

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

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

  
  
  
<style>
* {position:relative;}
body, html {
	height:100%;
}
body {
	font-family:Arial, sans-serif;
	overflow:hidden;
	display:flex;
	justify-content:center;
	align-items:center;
	background:#1d1d1d;
	
}

.ferrisWheel {
	width:400px;
	height:400px;
	flex-shrink:0;
	border-radius:50%;
	border: 4px solid #999;
}


.basket {
   text-align:center;
	line-height:50px;
	width:80px;
	height:78px;
	position:absolute;
	background-image: url("//repo.bfw.wiki/bfwrepo/images/ferris-basket.webp");
}

.arm {
	width:100px;
	height:4px;  
	background:#999;
	position:absolute;
}
</style>


  
  
</head>

<body>
  <div class="ferrisWheel"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GSDevTools3.min.js"></script>
      <script >
let ferr.........完整代码请登录后点击上方下载按钮下载查看

网友评论0