svg+css路灯下雪效果-html代码-BFW代码库

svg+css路灯下雪效果

代码语言：html

所属分类：动画

代码描述：svg+css路灯下雪效果

代码标签：效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
  --snowfallRate: 20000ms;
}

svg {
  width:40%;
  margin:0 auto;
}

path#snowGround {
  /* stroke-dasharray:100px;
  stroke-dashoffset:85px; */
  stroke-dasharray:100px;
  stroke-dashoffset:85px;
  animation-name: snowBuild2;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-duration:100000ms;
}

g#gSnowFence path {
  stroke-dasharray:10px;
  stroke-dashoffset:7px; 
  animation-name: snowBuild1;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-delay:4000ms;
  animation-duration:25000ms;
}

g#snowFall1 path:nth-child(1){
  stroke-width:0.5;
  stroke-dasharray:0.2 4 0.3 10 0.2 20 0.3 12;
  animation-name: snowFall1;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-duration:var(--snowfallRate);
}

g#snowFall1 path:nth-child(2){
  stroke-width:0.5;
  stroke-dasharray:0.2 10 0.3 4 0.2 20 0.3 12;
  animation-name: snowFall1;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-duration:var(--snowfallRate);
}

g#snowFall1 path:nth-child(3){
  stroke-width:0.5;
  stroke-dasharray:0.2 4 0.3 10 0.2 20 0.3 12;
  animation-name: snowFall1;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-duration:var(--snowfallRate);
}

g#snowFall1 path:nth-child(4){
  stroke-width:0.5;
  stroke-dasharray:0.2 15 0.3 14 0.2 8 0.3 12;
  animation-name: snowFall1;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-duration:var(--snowfallRate);
}

g#snowFall1 path:nth-child(5){
  stroke-width:0.5;
  stroke-dasharray:0.2 4 0.3 8 0.2 12 0.3 12;
  animation-name: snowFall1;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-duration:var(--snowfallRate);
}

g#snowFall1 path:nth-child(6){
  stroke-width:0.5;
  stroke-dasharray:0 10 0.2 4 0.3 10 0.2 20 0.3 12;
  animation-name: snowFall1;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-duration:var(--snowfallRate);
}

g#frontSnow path:nth-child(1) {
  stroke-dashar.........完整代码请登录后点击上方下载按钮下载查看