关于css:css雪花动画

51次阅读

共计 1515 个字符，预计需要花费 4 分钟才能阅读完成。

效果图：

我的项目地址：https://codepen.io/jianxiujiu…

HTML 的构造如下，创立 10 个雪花元素。

其实三四个元素也能够。元素越多雪花越多，雪花的速度不一样，会显得更有层次感。

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

首先，咱们先写一朵雪花，并设为相对定位。

.snow {
  position: absolute;
  color: #fff;
  &:after{content: "❄";}
}

这样咱们就失去一朵雪花了。那么怎么生成很多的雪花呢？咱们能够用 text-shadow 这个属性，给雪花设置一个暗影。

.snow {
  position: absolute;
  color: #fff;
  &:after {
    text-shadow: 10px 10px #fff;
    content: "❄";
  }
}

那么给一朵雪花生成 3 个暗影，就写 3 个 shadow 值就能够了。

text-shadow: 10px 10px #fff, 5px 25px #fff, 22px 5px #fff;

当咱们心愿雪花能有更更更多的暗影，然而手动写太累人了也不迷信，所以咱们须要用到 SASS 的 for 循环，并联合random() 随机函数去帮咱们随机生成多重暗影。
暗影的色彩能够设置为不同的透明度，能够让雪花看起来有层次感。

@function boxShadow ($n) {$value: #{random(2000)}px #{random(2000)}px rgba(255,255,255,random(10)/10);
  @for $i from 1 through $n{$value: #{$value} , #{random(2000)}px #{random(2000)}px rgba(255,255,255,random(10)/10);
  }
  @return $value;
}

.snow {
  position: absolute;
  color: #fff;
  &:after{text-shadow: boxShadow(150);
      content: "❄";
  }
}

此时咱们一朵雪花的多重暗影就实现了。然而一朵雪花的动画就只动一遍就隐没了，并不是咱们想要的成果。所以咱们须要多增加几朵雪花，让它们不同工夫不同地位落下。

@for $i from 1 through 10 {.snow:nth-child(#{$i}) {left: #{random(30)}vw;
    font-size: #{(random(15) + 12)}px; // 雪花大小随机
    color: rgba(255, 255, 255, random()); // 雪花透明度随机
    animation: falldown #{random(5) + 85}s #{$i * -3}s infinite both; // 雪花降落的工夫随机，区间为 86-90s
    &:after {
      content: "❄";
      text-shadow: boxShadow(random(150));
    }
  }
}

@keyframes falldown {
  0% {transform: translate3d(0, -2000px, 0);
  }
  100%{transform: translate3d(0, 2000px, 0);
  }
}

正文完