gsap实现下雪动画效果代码-html代码-BFW代码库

gsap实现下雪动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现下雪动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

body {
	background: #f63;
}

.flake {
	position: absolute;
	width: 100px;
	height: 100px;
	background-size: cover;
}

.flake1 {
	background-image: url("//repo.bfw.wiki/bfwrepo/images/snow/flake1.svg");
}

.flake2 {
	background-image: url("//repo.bfw.wiki/bfwrepo/images/snow/flake2.svg");
}

.flake3 {
	background-image: url("//repo.bfw.wiki/bfwrepo/images/snow/flake3.svg");
}

.flake4 {
	background-image: url("//repo.bfw.wiki/bfwrepo/images/snow/flake4.svg");
}

body {
	background: #ed213a; /* fallback for old browsers */
	background: -webkit-linear-gradient(
		to right,
		#93291e,
		#ed213a
	); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(
		to right,
		#93291e,
		#ed213a
	); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
</style>



</head>

<body  >
  
    
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script>
      <script  >
// full video tutorial at: https://www.youtube.com/watch?v=TAVVTRaXm5M

// click anywhere to pause / unpause

let numFlakes = 50;
let width = window.innerWidth;
let height = window.innerHeight;

function createFlake() {
	let flake = document.createElement("div");
	let fla.........完整代码请登录后点击上方下载按钮下载查看