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

代码语言：html
所属分类：动画
代码描述：js+svg实现下雪动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

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

  
  
  
<style>
.snow-container {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  pointer-events: none;
}

@-webkit-keyframes flake {
  0% {
    transform: translate(var(--x-start), var(--y-start)) rotate(0);
  }
  100% {
    transform: translate(var(--x-end), var(--y-end)) rotate(50deg);
  }
}

@keyframes flake {
  0% {
    transform: translate(var(--x-start), var(--y-start)) rotate(0);
  }
  100% {
    transform: translate(var(--x-end), var(--y-end)) rotate(50deg);
  }
}
.snowflake {
  --sz: 1rem;
  --blur: 2px;
  --a: 0.8;
  --x-start: 50vw;
  --x-end: 0;
  --y-start: -25vh;
  --y-end: 100vh;
  position: absolute;
  width: 200px;
  height: 200px;
  font-size: var(--sz);
  filter: url(#circleBlur4);
  -webkit-animation: flake 20s linear infinite;
          animation: flake 20s linear infinite;
  -webkit-animation-delay: var(--delay);
          animation-delay: var(--delay);
  transform: translate(var(--x-start), -15vh) rotate(0);
  opacity: var(--a);
  z-index: 1000;
}
.snowflake--m {
  --sz: 2rem;
  z-index: 2000;
  filter: unset;
}
.snowflake--l {
  --sz: 3rem;
  z-index: 3000;
}
.snowflake--xl {
  --sz: 6rem;
  filter: url(#circleBlur40);
  z-index: 4000;
}

html {
  --surface: hsl(200 10% 10%);
  --text: hsl(200 5% 80%);
  --hero-h: calc(100vh - 40px);
  background-color: var(--surface);
  color: var(--text);
}

body {
  min-block-size: 100%;
  min-inline-size: 100%;
  margin: 0;
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
  overflow-y: auto;
}
</style>

  
</head>

<body>
  <div class="snow-container"></div>

<svg width="0" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<filter id="circleBlur40" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB"><feOffset dx="40" dy="0" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o0" result="cT0"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="39" dy="8" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o1" result="cT1"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="37" dy="16" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o2" result="cT2"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="32" dy="24" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o3" result="cT3"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="27" dy="30" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o4" result="cT4"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="20" dy="35" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o5" result="cT5"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="12" dy="38" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o6" result="cT6"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="4" dy="40" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o7" result="cT7"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="-4" dy="40" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o8" result="cT8"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="-12" dy="38" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o9" result="cT9"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="-20" dy="35" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o10" result="cT10"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="-27" dy="30" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o11" result="cT11"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="-32" dy="24" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o12" result="cT12"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="-37" dy="16" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o13" result="cT13"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="-39" dy="8" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o14" result="cT14"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="-40" dy="0" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o15" result="cT15"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="-39" dy="-8" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o16" result="cT16"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="-37" dy="-16" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o17" result="cT17"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="-32" dy="-24" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o18" result="cT18"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="-27" dy="-30" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o19" result="cT19"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="-20" dy="-35" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o20" result="cT20"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="-12" dy="-38" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o21" result="cT21"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="-4" dy="-40" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o22" result="cT22"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="4" dy="-40" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o23" result="cT23"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="12" dy="-38" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o24" result="cT24"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="20" dy="-35" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o25" result="cT25"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="27" dy="-30" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o26" result="cT26"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="32" dy="-24" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o27" result="cT27"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="37" dy="-16" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o28" result="cT28"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feOffset dx="39" dy="-8" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o29" result="cT29"><feFuncA type="table" tableValues="0 0.06666666666666667"></feFuncA></feComponentTransfer><feMerge result="merge"><feMergeNode in="cT0"></feMergeNode><feMergeNode in="cT1"></feMergeNode><feMergeNode in="cT2"></feMergeNode><feMergeNode in="cT3"></feMergeNode><feMergeNode in="cT4"></feMergeNode><feMergeNode in="cT5"></feMergeNode><feMergeNode in="cT6"></feMergeNode><feMergeNode in="cT7"></feMergeNode><feMergeNode in="cT8"></feMergeNode><feMergeNode in="cT9"></feMergeNode><feMergeNode in="cT10"></feMergeNode><feMergeNode in="cT11"></feMergeNode><feMergeNode in="cT12"></feMergeNode><feMergeNode in="cT13"></feMergeNode><feMergeNode in="cT14"></feMergeNode><feMergeNode in="cT15"></feMergeNode><feMergeNode in="cT16"></feMergeNode><feMergeNode in="cT17"></feMergeNode><feMergeNode in="cT18"></feMergeNode><feMergeNode in="cT19"></feMergeNode><feMergeNode in="cT20"></feMergeNode><feMergeNode in="cT21"></feMergeNode><feMergeNode in="cT22"></feMergeNode><feMergeNode in="cT23"></feMergeNode><feMergeNode in="cT24"></feMergeNode><feMergeNode in="cT25"></feMergeNode><feMergeNode in="cT26"></feMergeNode><feMergeNode in="cT27"></feMergeNode><feMergeNode in="cT28"></feMergeNode><feMergeNode in="cT29"></feMergeNode></feMerge><feGaussianBlur stdDeviation="4" in="merge" edgeMode="none" result="blur"></feGaussianBlur></filter>
	</defs>
</svg>
<svg width="0" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<filter id="circleBlur4" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB"><feOffset dx="4" dy="0" in="SourceGraphic" result="o{id}"></feOffset><feComponentTransfer in="o0" result="cT0"><feFuncA type="table&qu.........完整代码请登录后点击上方下载按钮下载查看