gsap实现点击孔雀开屏动画交互效果代码

代码语言:html

所属分类:动画

代码描述:gsap实现点击孔雀开屏动画交互效果代码

代码标签: 孔雀开屏 动画 交互 效果

下面为部分代码预览,完整代码请点击下载或在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:#ffc107;
	background: linear-gradient(to bottom,  #ff9800 0%,#ffc107 40%);
}

.peacock-body {
	width:122px;
	height:258px;
	background-image:url("data:image/webp;base64,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");
	z-index:200;
}

.feathers {
	width:95px;
	height:288px;
	posi.........完整代码请登录后点击上方下载按钮下载查看

网友评论0