gsap+svg实现圣诞节下雪圣诞老人送礼动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：gsap+svg实现圣诞节下雪圣诞老人送礼动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />


  <title>CodePen - Christmas loop</title>
  
  
  
  
<style>
html {
	height: 100%;
}
body {
	background-color: #424242;
	width: 100%;
	height: 100%;
	margin: 0px;
	font-family: Arial;
	background: linear-gradient(
		180deg,
		rgba(18, 0, 48, 1) 0%,
		rgba(102, 39, 149, 1) 100%
	);
	position: relative;
}

#container {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#container > div {
	position: absolute;
	width: 10px;
	height: 10px;
	background: url(http://www.freepngimg.com/thumb/snowflakes/52-snowflake-png-image-thumb.png);
	background-size: 100% 100%;
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


</head>

<body translate="no" >
  <div id="container"></div>
		<svg
			preserveAspectRatio="xMidYMax"
			width="100%"
			height="100%"
			viewBox="0 0 1800 600"
			version="1.1"
			xmlns="http://www.w3.org/2000/svg"
			xmlns:xlink="http://www.w3.org/1999/xlink"
			xml:space="preserve"
			xmlns:serif="http://www.serif.com/"
			style="
				fill-rule: evenodd;
				clip-rule: evenodd;
				stroke-linecap: round;
				stroke-linejoin: round;
				stroke-miterlimit: 1.5;
			"
		>
			<g transform="matrix(1,0,0,1,644.739,-30.875)">
				<g transform="matrix(76,0,0,76,151.634,266.407)">
					<path
						d="M1.269,-0.62C1.269,-0.619 1.265,-0.616 1.256,-0.611C1.218,-0.591 1.184,-0.562 1.155,-0.524C1.126,-0.486 1.093,-0.427 1.056,-0.348C1.002,-0.234 0.954,-0.151 0.912,-0.101C0.869,-0.051 0.817,-0.015 0.754,0.007C0.783,0.011 0.805,0.013 0.821,0.013C0.871,0.013 0.911,0.003 0.941,-0.019C0.972,-0.04 1.014,-0.088 1.069,-0.162C1.073,-0.167 1.075,-0.169 1.077,-0.169C1.079,-0.169 1.079,-0.168 1.079,-0.166C1.079,-0.163 1.064,-0.142 1.033,-0.103C0.996,-0.056 0.963,-0.023 0.933,-0.006C0.904,0.011 0.867,0.02 0.824,0.02C0.798,0.02 0.769,0.017 0.738,0.011C0.716,0.018 0.694,0.022 0.671,0.022C0.654,0.022 0.645,0.019 0.645,0.012C0.645,0.004 0.657,-0 0.681,-0C0.694,-0 0.712,0.001 0.734,0.005L0.74,0.005C0.775,-0.008 0.804,-0.027 0.828,-0.054C0.852,-0.081 0.881,-0.126 0.914,-0.19C0.982,-0.319 1.036,-0.411 1.076,-0.465C1.114,-0.516 1.16,-0.56 1.214,-0.596C1.241,-0.614 1.258,-0.623 1.266,-0.623C1.268,-0.623 1.269,-0.622 1.269,-0.62ZM1.504,-0.488C1.504,-0.475 1.503,-0.463 1.5,-0.451C1.497,-0.439 1.494,-0.433 1.491,-0.433C1.489,-0.433 1.488,-0.434 1.488,-0.436C1.488,-0.437 1.488,-0.439 1.489,-0.44C1.494,-0.451 1.496,-0.467 1.496,-0.486C1.496,-0.529 1.479,-0.566 1.444,-0.596C1.41,-0.626 1.368,-0.641 1.318,-0.641C1.238,-0.641 1.155,-0.602 1.071,-0.523C1.038,-0.492 1.009,-0.462 0.985,-0.433C0.962,-0.405 0.917,-0.346 0.849,-0.257C0.75,-0.125 0.668,-0.042 0.604,-0.01C0.576,0.005 0.557,0.012 0.549,0.012C0.547,0.012 0.546,0.011 0.546,0.009C0.546,0.009 0.55,0.006 0.556,0.001C0.588,-0.023 0.614,-0.054 0.633,-0.095C0.65,-0.131 0.682,-0.218 0.727,-0.356C0.766,-0.473 0.81,-0.557 0.86,-0.608C0.862,-0.61 0.863,-0.611 0.863,-0.613C0.859,-0.614 0.849,-0.607 0.834,-0.592C0.786,-0.544 0.729,-0.457 0.663,-0.332C0.623,-0.255 0.587,-0.197 0.557,-0.157C0.527,-0.118 0.49,-0.083 0.448,-0.053C0.379,-0.004 0.31,0.021 0.24,0.021C0.195,0.021 0.158,0.011 0.13,-0.008C0.101,-0.027 0.087,-0.051 0.087,-0.081C0.087,-0.098 0.092,-0.112 0.102,-0.124C0.111,-0.135 0.124,-0.141 0.138,-0.141C0.159,-0.141 0.17,-0.131 0.17,-0.11C0.17,-0.099 0.166,-0.09 0.16,-0.082C0.153,-0.075 0.144,-0.071 0.135,-0.071C0.118,-0.071 0.11,-0.08 0.11,-0.097C0.11,-0.104 0.109,-0.107 0.106,-0.107C0.101,-0.107 0.099,-0.098 0.099,-0.08C0.099,-0.053 0.112,-0.031 0.138,-0.014C0.165,0.003 0.199,0.011 0.241,0.011C0.326,0.011 0.409,-0.033 0.491,-0.121C0.524,-0.157 0.552,-0.191 0.575,-0.225C0.597,-0.259 0.643,-0.332 0.711,-0.445C0.74,-0.493 0.772,-0.536 0.808,-0.575C0.844,-0.614 0.87,-0.634 0.885,-0.634C0.887,-0.634 0.888,-0.633 0.888,-0.631C0.888,-0.63 0.887,-0.628 0.886,-0.627C0.856,-0.594 0.829,-0.531 0.804,-0.439C0.768,-0.304 0.734,-0.205 0.701,-0.144C0.67,-0.084 0.628,-0.039 0.578,-0.008C0.577,-0.007 0.576,-0.007 0.576,-0.006C0.577,-0.005 0.577,-0.005 0.578,-0.005C0.586,-0.005 0.604,-0.015 0.633,-0.036C0.668,-0.061 0.701,-0.09 0.73,-0.125C0.76,-0.159 0.813,-0.23 0.891,-0.337C0.946,-0.412 0.99,-0.468 1.022,-0.503C1.055,-0.538 1.091,-0.568 1.13,-0.595C1.191,-0.637 1.253,-0.657 1.316,-0.657C1.371,-0.657 1.416,-0.641 1.451,-0.609C1.486,-0.578 1.504,-0.537 1.504,-0.488ZM0.73,-0.515C0.73,-0.508 0.721,-0.494 0.702,-0.473C0.674,-0.442 0.647,-0.426 0.621,-0.426C0.603,-0.426 0.588,-0.432 0.576,-0.446C0.563,-0.459 0.557,-0.475 0.557,-0.494C0.557,-0.513 0.564,-0.535 0.577,-0.561C0.594,-0.594 0.602,-0.617 0.602,-0.63C0.602,-0.646 0.594,-0.66 0.579,-0.67C0.563,-0.68 0.542,-0.685 0.517,-0.685C0.444,-0.685 0.376,-0.656 0.313,-0.597C0.249,-0.539 0.217,-0.476 0.217,-0.41C0.217,-0.376 0.227,-0.348 0.248,-0.326C0.269,-0.305 0.296,-0.294 0.329,-0.294C0.359,-0.294 0.388,-0.302 0.418,-0.319C0.449,-0.336 0.473,-0.357 0.491,-0.384C0.493,-0.385 0.494,-0.386 0.494,-0.386C0.497,-0.386 0.498,-0.385 0.498,-0.382C0.498,-0.375 0.488,-0.363 0.467,-0.344C0.424,-0.306 0.377,-0.286 0.327,-0.286C0.292,-0.286 0.263,-0.298 0.241,-0.32C0.219,-0.343 0.208,-0.373 0.208,-0.409C0.208,-0.48 0.241,-0.545 0.306,-0.604C0.371,-0.663 0.443,-0.693 0.52,-0.693C0.552,-0.693 0.577,-0.685 0.595,-0.669C0.613,-0.653 0.622,-0.631 0.622,-0.603C0.622,-0.582 0.612,-0.55 0.591,-0.508C0.584,-0.493 0.58,-0.481 0.58,-0.472C0.58,-0.447 0.593,-0.435 0.62,-0.435C0.636,-0.435 0.654,-0.443 0.674,-0.458C0.693,-0.473 0.709,-0.492 0.721,-0.514C0.723,-0.518 0.725,-0.519 0.726,-0.519C0.729,-0.519 0.73,-0.518 0.73,-0.515Z"
						style="fill: white; fill-rule: nonzero"
					/>
				</g>
				<g transform="matrix(76,0,0,76,225.964,266.407)">
					<path
						d="M0.337,-0.153C0.337,-0.152 0.334,-0.147 0.328,-0.14L0.307,-0.114C0.24,-0.03 0.182,0.011 0.134,0.011C0.111,0.011 0.092,0.003 0.076,-0.013C0.061,-0.03 0.053,-0.05 0.053,-0.075C0.053,-0.134 0.094,-0.185 0.176,-0.23C0.219,-0.253 0.254,-0.265 0.281,-0.265C0.292,-0.265 0.302,-0.262 0.311,-0.255C0.319,-0.248 0.323,-0.239 0.323,-0.229C0.323,-0.206 0.308,-0.186 0.277,-0.169C0.247,-0.153 0.196,-0.137 0.124,-0.123C0.102,-0.09 0.091,-0.062 0.091,-0.039C0.091,-0.011 0.106,0.003 0.136,0.003C0.188,0.003 0.251,-0.047 0.325,-0.148C0.329,-0.153 0.333,-0.156 0.335,-0.156C0.337,-0.155 0.337,-0.154 0.337,-0.153ZM0.296,-0.243C0.296,-0.254 0.29,-0.259 0.279,-0.259C0.262,-0.259 0.239,-0.247 0.211,-0.223C0.183,-0.199 0.155,-0.168 0.128,-0.13C0.175,-0.142 0.215,-0.159 0.247,-0.181C0.28,-0.203 0.296,-0.224 0.296,-0.243Z"
						style="fill: white; fill-rule: nonzero"
					/>
				</g>
				<g transform="matrix(76,0,0,76,244.667,266.407)">
					<path
						d="M0.369,-0.153C0.369,-0.15 0.36,-0.139 0.34,-0.117C0.315,-0.09 0.292,-0.076 0.27,-0.076C0.245,-0.076 0.233,-0.09 0.233,-0.119C0.233,-0.128 0.235,-0.14 0.239,-0.154C0.218,-0.136 0.202,-0.118 0.189,-0.101C0.176,-0.083 0.154,-0.047 0.122,0.007C0.105,0.006 0.095,0.005 0.092,0.005C0.09,0.005 0.081,0.006 0.062,0.007L0.142,-0.123C0.182,-0.188 0.202,-0.229 0.202,-0.244C0.202,-0.253 0.198,-0.258 0.191,-0.258C0.173,-0.258 0.14,-0.223 0.092,-0.153C0.089,-0.148 0.086,-0.146 0.084,-0.146C0.082,-0.146 0.082,-0.147 0.082,-0.149C0.082,-0.15 0.083,-0.152 0.084,-0.153L0.093,-0.165C0.143,-0.232 0.177,-0.265 0.195,-0.265C0.221,-0.265 0.234,-0.248 0.234,-0.215C0.234,-0.19 0.221,-0.157 0.194,-0.115C0.211,-0.135 0.227,-0.151 0.242,-0.163C0.255,-0.192 0.27,-0.216 0.288,-0.236C0.307,-0.255 0.323,-0.265 0.338,-0.265C0.348,-0.265 0.353,-0.261 0.353,-0.252C0.353,-0.236 0.33,-0.214 0.285,-0.185C0.278,-0.181 0.267,-0.174 0.253,-0.165L0.247,-0.16C0.243,-0.145 0.24,-0.133 0.24,-0.123C0.24,-0.096 0.251,-0.082 0.271,-0.082C0.296,-0.082 0.324,-0.103 0.354,-0.145C0.361,-0.152 0.365,-0.156 0.366,-0.156C0.368,-0.156 0.369,-0.155 0.369,-0.153Z"
						style="fill: white; fill-rule: nonzero"
					/>
				</g>
				<g transform="matrix(76,0,0,76,265.782,266.407)">
					<path
						d="M0.369,-0.153C0.369,-0.15 0.36,-0.139 0.34,-0.117C0.315,-0.09 0.292,-0.076 0.27,-0.076C0.245,-0.076 0.233,-0.09 0.233,-0.119C0.233,-0.128 0.235,-0.14 0.239,-0.154C0.218,-0.136 0.202,-0.118 0.189,-0.101C0.176,-0.083 0.154,-0.047 0.122,0.007C0.105,0.006 0.095,0.005 0.092,0.005C0.09,0.005 0.081,0.006 0.062,0.007L0.142,-0.123C0.182,-0.188 0.202,-0.229 0.202,-0.244C0.202,-0.253 0.198,-0.258 0.191,-0.258C0.173,-0.258 0.14,-0.223 0.092,-0.153C0.089,-0.148 0.086,-0.146 0.084,-0.146C0.082,-0.146 0.082,-0.147 0.082,-0.149C0.082,-0.15 0.083,-0.152 0.084,-0.153L0.093,-0.165C0.143,-0.232 0.177,-0.265 0.195,-0.265C0.221,-0.265 0.234,-0.248 0.234,-0.215C0.234,-0.19 0.221,-0.157 0.194,-0.115C0.211,-0.135 0.227,-0.151 0.242,-0.163C0.255,-0.192 0.27,-0.216 0.288,-0.236C0.307,-0.255 0.323,-0.265 0.338,-0.265C0.348,-0.265 0.353,-0.261 0.353,-0.252C0.353,-0.236 0.33,-0.214 0.285,-0.185C0.278,-0.181 0.267,-0.174 0.253,-0.165L0.247,-0.16C0.243,-0.145 0.24,-0.133 0.24,-0.123C0.24,-0.096 0.251,-0.082 0.271,-0.082C0.296,-0.082 0.324,-0.103 0.354,-0.145C0.361,-0.152 0.365,-0.156 0.366,-0.156C0.368,-0.156 0.369,-0.155 0.369,-0.153Z"
						style="fill: white; fill-rule: nonzero"
					/>
				</g>
				<g transform="matrix(76,0,0,76,286.897,266.407)">
					<path
						d="M0.398,-0.153C0.398,-0.148 0.38,-0.125 0.344,-0.086C0.305,-0.042 0.253,-0.003 0.189,0.032L0.165,0.075C0.118,0.16 0.069,0.223 0.017,0.264C-0.........完整代码请登录后点击上方下载按钮下载查看