svg+js实现立体雪花下雪飘动动画效果代码-html代码-BFW代码库

svg+js实现立体雪花下雪飘动动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+js实现立体雪花下雪飘动动画效果代码

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

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

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

  
  
<style>
body {
	margin: 0;
	background: linear-gradient(darkblue, #111122);
	overflow: hidden;
	height: 100vh;
}
path:hover {
	
}
</style>

  
  
</head>

<body translate="no">
  
  
      <script>
function snowfetti(el = document.body, opt_properties) {
	if (!el) {
		console.error("Must have element to populate the confetti!");
		return;
	}
	const defaultProperties = {
		addBlur: true,
		angle: 0,
		beginStart: false,
		drop: 400,
		fadeout: true,
		fixedSize: false,
		flakes: 100,
		scale: 1,
		speed: 5000,
		spread: 400,
		spin: true,
		zSpin: true
	};
	const c = {...defaultProperties, ...opt_properties};
	const randInt = (min, max) => {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	};
	const baseEncode = (vall = document.querySelector("#usrInput").value) => {
	let usrVal = vall.replace(/\s\s+/g, ` `);
	let btoa = window.btoa(usrVal);
	let res = encodeURI(vall);
	if (res.indexOf("xmlns=") == -1) res = res.replace(`%3Csvg`, `%3Csvg xmlns=%22http://www.w3.org/2000/svg%22`);
	res = res.replaceAll(`#`, `%23`).replaceAll(`%22`, `'`).replaceAll(`%0A`, ``).replaceAll(`%09`, ``).replaceAll(`%20`, ` `).replace(/\s\s+/g, ` `);
	let baseEncodedSVG = `data:image/svg+xml,${res}`;
	let bgIm = `background-image: url("${baseEncodedSVG}");`;
	return [`data:image/svg+xml;base64,${btoa}`, baseEncodedSVG];
}
	const hh = c.drop;
	const ww = c.spread;
	const randomBlur = () => {
		if (c.addBlur) return randInt(1, 2);
		else return 1;
	};
	const overlayId = `conf${randInt(0, 1000)}etti${randInt(0, 1000)}ver${randInt(0, 1000)}lay`;
	let animatedConfetti = ``;
	// make sure number of flakes is a number
	if (!c.flakes || Number.isNaN(c.flakes * 1)) {
		c.flakes = 100;
	}
	for (let i = 0; i < c.flakes; i++) {
		const conId = `con${randInt(0, 1000)}fet${randInt(0, 1000)}ti${randInt(0, 1000)}`;
		const confettiDur = `${randInt(c.speed / 2, c.speed)}`;
		let confettiSpin = ``;
		let confettiType = ``;
		if (c.spin) {
			confettiSpin = `<animateTransform attributeName="transform" type="rotate" values="0 0 0; ${(Math.random() < 0.5 ? -1 : 1) * 360} 0 0" dur="${randInt(c.speed / 6, c.speed / 2)}ms" begin="-${randInt(100, 5000)}ms" repeatCount="indefinite" additive="sum" />`;
		}
		if (c.zSpin) {
			let xySpin = `-1 1`;
			if (randInt(0, 1) == 0) xySpin = `1 -1`;
			confettiSpin += `<animateTransform attributeName="transform" type="scale" values="1 1; ${xySpin}; 1 1" dur="${randInt(c.speed / 10, c.speed / 2)}ms" repeatCount="indefinite" additive="sum" />`;
		}
		let confettiColor = ``;
		let fixedScale = 1;
		if (!c.fixedSize) {
			fixedScale = randInt(5, 20) / 10;
		}
		let midpoints = randInt(3, 12);
		let snowFlakePath = `M 50 50 v-35`;
		for (let i = 0; i < midpoints; i++) {
			let linelength = randInt(20, 120) / 10;
			let yPos = 50 - randInt(50, 350) / 10;
			let path = `M50 ${yPos}l-${linelength} -${linelength}M50 ${yPos}l${linelength} -${linelength}`;
			snowFlakePath += path;
		}
		let arms = randInt(6, 12);
		let angle = 360 / arms;
		let armCopies = ``;
		let sw = randInt(10, 40) / 10;
		for (let i = 1; i < arms; i++) {
			armCopies += `<g transform="rotate(${angle * i} 50 50)"><path id="${conId + i.........完整代码请登录后点击上方下载按钮下载查看