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

代码语言：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-dasharray:0.7 8 0.6 20 0.8 12 0.6 10;
  animation-name: snowFall1;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-duration:var(--snowfallRate);
}

g#frontSnow path:nth-child(2) {
  stroke-dasharray:0.7 8 0.6 12 0.8 20 0.6 12 0.7 23;
  animation-name: snowFall1;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-duration:var(--snowfallRate);
}

g#frontSnow path:nth-child(3) {
  stroke-dasharray:0.7 5 0.6 20 0.8 11 0.6 12 0.7 23;
  animation-name: snowFall1;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-duration:var(--snowfallRate);
}

g#frontSnow path:nth-child(4) {
  stroke-dasharray:0.7 15 0.6 15 0.8 4 0.6 12 0.7 23;
  animation-name: snowFall1;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-duration:var(--snowfallRate);
}

g#frontSnow path:nth-child(5) {
  stroke-dasharray:0.7 8 0.6 24 0.8 9 0.6 20 0.7 13;
  animation-name: snowFall1;
  animation-iteration-count:infinite;
  animation-timing-function:ease-out;
  animation-duration:var(--snowfallRate);
}

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

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

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

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

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

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

g#lightSnow path:nth-child(3){
  stroke-width:0.5;
  stroke-dasharray:0.2 30 0.3 6 0.2 25 0.3 10 0.2 25 0.2 5 0.3 15;
  animation-name: snowFall1;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-duration:var(--snowfallRate);
}

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

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

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

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

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

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

@keyframes snowFall1 {
  0% {
    stroke-dashoffset:100px;
  }
 .........完整代码请登录后点击上方下载按钮下载查看