纯css打造的雪花飞舞效果-html代码-BFW代码库

代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> Snow (Pure CSS)</title>
<style>
  body {
  height: 100vh;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  filter: drop-shadow(0 0 10px white);
}

.snow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}
.snow:nth-child(1) {
  opacity: 0.4137;
  transform: translate(94.4644vw, -10px) scale(0.1578);
  animation: fall-1 24s -9s linear infinite;
}
@keyframes fall-1 {
  78.684% {
    transform: translate(89.9793vw, 78.684vh) scale(0.1578);
  }
  to {
    transform: translate(92.22185vw, 100vh) scale(0.1578);
  }
}
.snow:nth-child(2) {
  opacity: 0.2583;
  transform: translate(84.5397vw, -10px) scale(0.7857);
  animation: fall-2 20s -1s linear infinite;
}
@keyframes fall-2 {
  59.41% {
    transform: translate(93.0741vw, 59.41vh) scale(0.7857);
  }
  to {
    transform: translate(88.8069vw, 100vh) scale(0.7857);
  }
}
.snow:nth-child(3) {
  opacity: 0.1493;
  transform: translate(83.9978vw, -10px) scale(0.2114);
  animation: fall-3 19s -24s linear infinite;
}
@keyframes fall-3 {
  41.314% {
    transform: translate(87.5552vw, 41.314vh) scale(0.2114);
  }
  to {
    transform: translate(85.7765vw, 100vh) scale(0.2114);
  }
}
.snow:nth-child(4) {
  opacity: 0.2159;
  transform: translate(29.0617vw, -10px) scale(0.0953);
  animation: fall-4 23s -2s linear infinite;
}
@keyframes fall-4 {
  32.968% {
    transform: translate(22.2153vw, 32.968vh) scale(0.0953);
  }
  to {
    transform: translate(25.6385vw, 100vh) scale(0.0953);
  }
}
.snow:nth-child(5) {
  opacity: 0.3172;
  transform: translate(32.1803vw, -10px) scale(0.0484);
  animation: fall-5 26s -5s linear infinite;
}
@keyframes fall-5 {
  67.459% {
    transform: translate(30.3681vw, 67.459vh) scale(0.0484);
  }
  to {
    transform: translate(31.2742vw, 100vh) scale(0.0484);
  }
}
.snow:nth-child(6) {
  opacity: 0.7535;
  transform: translate(43.7952vw, -10px) scale(0.2822);
  animation: fall-6 11s -23s linear infinite;
}
@keyframes fall-6 {
  35.01% {
    transform: translate(41.7162vw, 35.01vh) scale(0.2822);
  }
  to {
    transform: translate(42.7557vw, 100vh) scale(0.2822);
  }
}
.snow:nth-child(7) {
  opacity: 0.5536;
  transform: translate(93.8943vw, -10px) scale(0.4912);
  animation: fall-7 21s -10s linear infinite;
}
@keyframes fall-7 {
  74.13% {
    transform: translate(99.721vw, 74.13vh) scale(0.4912);
  }
  to {
    transform: translate(96.80765vw, 100vh) scale(0.4912);
  }
}
.snow:nth-child(8) {
  opacity: 0.338;
  transform: translate(27.5159vw, -10px) scale(0.3641);
  animation: fall-8 23s -2s linear infinite;
}
@keyframes fall-8 {
  65.803% {
    transform: translate(21.3413vw, 65.803vh) scale(0.3641);
  }
  to {
    transform: translate(24.4286vw, 100vh) scale(0.3641);
  }
}
.snow:nth-child(9) {
  opacity: 0.7885;
  transform: translate(63.5635vw, -10px) scale(0.4152);
  animation: fall-9 10s -13s linear infinite;
}
@keyframes fall-9 {
  62.4% {
    transform: translate(69.4325vw, 62.4vh) scale(0.4152);
  }
  to {
    transform: translate(66.498vw, 100vh) scale(0.4152);
  }
}
.snow:nth-child(10) {
  opacity: 0.241;
  transform: translate(5.6847vw, -10px) scale(0.0013);
  animation: fall-10 20s -28s linear infinite;
}
@keyframes fall-10 {
  60.6% {
    transform: translate(0.8942vw, 60.6vh) scale(0.0013);
  }
  to {
    transform: translate(3.28945vw, 100vh) scale(0.0013);
  }
}
.snow:nth-child(11) {
  opacity: 0.9147;
  transform: translate(70.4916vw, -10px) scale(0.3804);
  animation: fall-11 26s -8s linear infinite;
}
@keyframes fall-11 {
  76.116% {
    transform: translate(76.4041vw, 76.116vh) scale(0.3804);
  }
  to {
    transform: translate(73.44785vw, 100vh) scale(0.3804);
  }
}
.snow:nth-child(12) {
  opacity: 0.9954;
  transform: translate(64.8149vw, -10px) scale(0.5621);
  animation: fall-12 19s -17s linear infinite;
}
@keyframes fall-12 {
  53.987% {
    transform: translate(68.0073vw, 53.987vh) scale(0.5621);
  }
  to {
    transform: translate(66.4111vw, 100vh) scale(0.5621);
  }
}
.snow:nth-child(13) {
  opacity: 0.8775;
  transform: translate(70.8575vw, -10px) scale(0.4567);
  animation: fall-13 26s -2s linear infinite;
}
@keyframes fall-13 {
  70.635% {
    transform: translate(62.758vw, 70.635vh) scale(0.4567);
  }
  to {
    transform: translate(66.80775vw, 100vh) scale(0.4567);
  }
}
.snow:nth-child(14) {
  opacity: 0.9676;
  transform: translate(52.444vw, -10px) scale(0.1021);
  animation: fall-14 12s -25s linear infinite;
}
@keyframes fall-14 {
  74.935% {
    transform: translate(61.2353vw, 74.935vh) scale(0.1021);
  }
  to {
    transform: translate(56.83965vw, 100vh) scale(0.1021);
  }
}
.snow:nth-child(15) {
  opacity: 0.8821;
  transform: translate(94.2491vw, -10px) scale(0.7291);
  animation: fall-15 28s -18s linear infinite;
}
@keyframes fall-15 {
  70.269% {
    transform: translate(96.4384vw, 70.269vh) scale(0.7291);
  }
  to {
    transform: translate(95.34375vw, 100vh) scale(0.7291);
  }
}
.snow:nth-child(16) {
  opacity: 0.8899;
  transform: translate(28.7291vw, -10px) scale(0.0625);
  animation: fall-16 24s -24s linear infinite;
}
@keyframes fall-16 {
  65.757% {
    transform: translate(28.775vw, 65.757vh) scale(0.0625);
  }
  to {
    transform: translate(28.75205vw, 100vh) scale(0.0625);
  }
}
.snow:nth-child(17) {
  opacity: 0.1068;
  transform: translate(94.4959vw, -10px) scale(0.0561);
  animation: fall-17 30s -1s linear infinite;
}
@keyframes fall-17 {
  43.682% {
    transform: translate(103.9638vw, 43.682vh) scale(0.0561);
  }
  to {
    transform: translate(99.22985vw, 100vh) scale(0.0561);
  }
}
.snow:nth-child(18) {
  opacity: 0.4032;
  transform: translate(76.1189vw, -10px) scale(0.6101);
  animation: fall-18 18s -6s linear infinite;
}
@keyframes fall-18 {
  34.09% {
    transform: translate(74.8714vw, 34.09vh) scale(0.6101);
  }
  to {
    transform: translate(75.49515vw, 100vh) scale(0.6101);
  }
}
.snow:nth-child(19) {
  opacity: 0.3023;
  transform: translate(77.62vw, -10px) scale(0.7394);
  animation: fall-19 19s -22s linear infinite;
}
@keyframes fall-19 {
  73.705% {
    transform: translate(77.2138vw, 73.705vh) scale(0.7394);
  }
  to {
    transform: translate(77.4169vw, 100vh) scale(0.7394);
  }
}
.snow:nth-child(20) {
  opacity: 0.0797;
  transform: translate(54.7279vw, -10px) scale(0.9396);
  animation: fall-20 10s -1s linear infinite;
}
@keyframes fall-20 {
  53.568% {
    transform: translate(50.4032vw, 53.568vh) scale(0.9396);
  }
  to {
    transform: translate(52.56555vw, 100vh) scale(0.9396);
  }
}
.snow:nth-child(21) {
  opacity: 0.962;
  transform: translate(54.5737vw, -10px) scale(0.3775);
  animation: fall-21 11s -4s linear infinite;
}
@keyframes fall-21 {
  52.547% {
    transform: translate(45.7078vw, 52.547vh) scale(0.3775);
  }
  to {
    transform: translate(50.14075vw, 100vh) scale(0.3775);
  }
}
.snow:nth-child(22) {
  opacity: 0.2423;
  transform: translate(1.6561vw, -10px) scale(0.1523);
  animation: fall-22 17s -1s linear infinite;
}
@keyframes fall-22 {
  51.108% {
    transform: translate(-3.8372vw, 51.108vh) scale(0.1523);
  }
  to {
    transform: translate(-1.09.........完整代码请登录后点击上方下载按钮下载查看