纯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.09055vw, 100vh) scale(0.1523);
  }
}
.snow:nth-child(23) {
  opacity: 0.7103;
  transform: translate(46.116vw, -10px) scale(0.1238);
  animation: fall-23 18s -17s linear infinite;
}
@keyframes fall-23 {
  74.333% {
    transform: translate(46.8886vw, 74.333vh) scale(0.1238);
  }
  to {
    transform: translate(46.5023vw, 100vh) scale(0.1238);
  }
}
.snow:nth-child(24) {
  opacity: 0.4446;
  transform: translate(11.9251vw, -10px) scale(0.3791);
  animation: fall-24 22s -25s linear infinite;
}
@keyframes fall-24 {
  46.438% {
    transform: translate(6.1326vw, 46.438vh) scale(0.3791);
  }
  to {
    transform: translate(9.02885vw, 100vh) scale(0.3791);
  }
}
.snow:nth-child(25) {
  opacity: 0.8675;
  transform: translate(63.1375vw, -10px) scale(0.0355);
  animation: fall-25 11s -1s linear infinite;
}
@keyframes fall-25 {
  47.135% {
    transform: translate(55.3929vw, 47.135vh) scale(0.0355);
  }
  to {
    transform: translate(59.2652vw, 100vh) scale(0.0355);
  }
}
.snow:nth-child(26) {
  opacity: 0.7317;
  transform: translate(26.2526vw, -10px) scale(0.5823);
  animation: fall-26 18s -17s linear infinite;
}
@keyframes fall-26 {
  62.904% {
    transform: translate(26.107vw, 62.904vh) scale(0.5823);
  }
  to {
    transform: translate(26.1798vw, 100vh) scale(0.5823);
  }
}
.snow:nth-child(27) {
  opacity: 0.2899;
  transform: translate(74.5515vw, -10px) scale(0.9626);
  animation: fall-27 19s -26s linear infinite;
}
@keyframes fall-27 {
  33.04% {
    transform: translate(76.373vw, 33.04vh) scale(0.9626);
  }
  to {
    transform: translate(75.46225vw, 100vh) scale(0.9626);
  }
}
.snow:nth-child(28) {
  opacity: 0.6201;
  transform: translate(57.9264vw, -10px) scale(0.0916);
  animation: fall-28 29s -8s linear infinite;
}
@keyframes fall-28 {
  48.272% {
    transform: translate(50.3757vw, 48.272vh) scale(0.0916);
  }
  to {
    transform: translate(54.15105vw, 100vh) scale(0.0916);
  }
}
.snow:nth-child(29) {
  opacity: 0.6682;
  transform: translate(11.4586vw, -10px) scale(0.8488);
  animation: fall-29 27s -18s linear infinite;
}
@keyframes fall-29 {
  42.409% {
    transform: translate(5.3529vw, 42.409vh) scale(0.8488);
  }
  to {
    transform: translate(8.40575vw, 100vh) scale(0.8488);
  }
}
.snow:nth-child(30) {
  opacity: 0.2633;
  transform: translate(54.2958vw, -10px) scale(0.796);
  animation: fall-30 11s -21s linear infinite;
}
@keyframes fall-30 {
  32.57% {
    transform: translate(46.8277vw, 32.57vh) scale(0.796);
  }
  to {
    transform: translate(50.56175vw, 100vh) scale(0.796);
  }
}
.snow:nth-child(31) {
  opacity: 0.9727;
  transform: translate(7.908vw, -10px) scale(0.1798);
  animation: fall-31 26s -9s linear infinite;
}
@keyframes fall-31 {
  69.169% {
    transform: translate(-1.2011vw, 69.169vh) scale(0.1798);
  }
  to {
    transform: translate(3.35345vw, 100vh) scale(0.1798);
  }
}
.snow:nth-child(32) {
  opacity: 0.7458;
  transform: translate(90.9568vw, -10px) scale(0.8018);
  animation: fall-32 23s -10s linear infinite;
}
@keyframes fall-32 {
  61.763% {
    transform: translate(90.5905vw, 61.763vh) scale(0.8018);
  }
  to {
    transform: translate(90.77365vw, 100vh) scale(0.8018);
  }
}
.snow:nth-child(33) {
  opacity: 0.3613;
  transform: translate(89.5061vw, -10px) scale(0.1675);
  animation: fall-33 24s -27s linear infinite;
}
@keyframes fall-33 {
  63.847% {
    transform: translate(93.3836vw, 63.847vh) scale(0.1675);
  }
  to {
    transform: translate(91.44485vw, 100vh) scale(0.1675);
  }
}
.snow:nth-child(34) {
  opacity: 0.572;
  transform: translate(5.8874vw, -10px) scale(0.9025);
  animation: fall-34 20s -9s linear infinite;
}
@keyframes fall-34 {
  78.686% {
    transform: translate(13.189vw, 78.686vh) scale(0.9025);
  }
  to {
    transform: translate(9.5382vw, 100vh) scale(0.9025);
  }
}
.snow:nth-child(35) {
  opacity: 0.4092;
  transform: translate(96.1431vw, -10px) scale(0.9845);
  animation: fall-35 24s -12s linear infinite;
}
@keyframes fall-35 {
  39.153% {
    transform: translate(97.3591vw, 39.153vh) scale(0.9845);
  }
  to {
    transform: translate(96.7511vw, 100vh) scale(0.9845);
  }
}
.snow:nth-child(36) {
  opacity: 0.6796;
  transform: translate(54.3725vw, -10px) scale(0.58);
  animation: fall-36 24s -24s linear infinite;
}
@keyframes fall-36 {
  77.283% {
    transform: translate(55.5146vw, 77.283vh) scale(0.58);
  }
  to {
    transform: translate(54.94355vw, 100vh) scale(0.58);
  }
}
.snow:nth-child(37) {
  opacity: 0.565;
  transform: translate(23.5644vw, -10px) scale(0.3907);
  animation: fall-37 13s -4s linear infinite;
}
@keyframes fall-37 {
  73.521% {
    transform: translate(19.8636vw, 73.521vh) scale(0.3907);
  }
  to {
    transform: translate(21.714vw, 100vh) scale(0.3907);
  }
}
.snow:nth-child(38) {
  opacity: 0.0637;
  transform: translate(74.5704vw, -10px) scale(0.8519);
  animation: fall-38 28s -12s linear infinite;
}
@keyframes fall-38 {
  35.003% {
    transform: translate(80.8781vw, 35.003vh) scale(0.8519);
  }
  to {
    transform: translate(77.72425vw, 100vh) scale(0.8519);
  }
}
.snow:nth-child(39) {
  opacity: 0.8523;
  transform: translate(24.9083vw, -10px) scale(0.7451);
  animation: fall-39 14s -8s linear infinite;
}
@keyframes fall-39 {
  47.908% {
    transform: translate(25.8976vw, 47.908vh) scale(0.7451);
  }
  to {
    transform: translate(25.40295vw, 100vh) scale(0.7451);
  }
}
.snow:nth-child(40) {
  opacity: 0.0032;
  transform: translate(28.2444vw, -10px) scale(0.1907);
  animation: fall-40 14s -6s linear infinite;
}
@keyframes fall-40 {
  43.457% {
    transform: translate(36.643vw, 43.457vh) scale(0.1907);
  }
  to {
    transform: translate(32.4437vw, 100vh) scale(0.1907);
  }
}
.snow:nth-child(41) {
  opacity: 0.0397;
  transform: translate(59.4526vw, -10px) scale(0.4081);
  animation: fall-41 18s -28s linear infinite;
}
@keyframes fall-41 {
  73.712% {
    transform: translate(56.322vw, 73.712vh) scale(0.4081);
  }
  to {
    transform: translate(57.8873vw, 100vh) scale(0.4081);
  }
}
.snow:nth-child(42) {
  opacity: 0.0041;
  transform: translate(65.1002vw, -10px) scale(0.4799);
  animation: fall-42 13s -15s linear infinite;
}
@keyframes fall-42 {
  66.036% {
    transform: translate(73.7115vw, 66.036vh) scale(0.4799);
  }
  to {
    transform: translate(69.40585vw, 100vh) scale(0.4799);
  }
}
.snow:nth-child(43) {
  opacity: 0.6192;
  transform: translate(10.5181vw, -10px) scale(0.7305);
  animation: fall-43 25s -23s linear infinite;
}
@keyframes fall-43 {
  57.245% {
    transform: translate(7.6548vw, 57.245vh) scale(0.7305);
  }
  to {
    transform: translate(9.08645vw, 100vh) scale(0.7305);
  }
}
.snow:nth-child(44) {
  opacity: 0.9187;
  transform: translate(95.4005vw, -10px) scale(0.734);
  animation: fall-44 17s -29s linear infinite;
}
@keyframes fall-44 {
  41.122% {
    transform: translate(93.6445vw, 41.122vh) scale(0.734);
  }
  to {
    transform: translate(94.5225vw, 100vh) scale(0.734);
  }
}
.snow:nth-child(45) {
  opacity: 0.7411;
  transform: translate(78.2304vw, -10px) scale(0.4572);
  animation: fall-45 29s -30s linear infinite;
}
@keyframes fall-45 {
  48.791% {
    transform: translate(88.2014vw, 48.791vh) scale(0.4572);
  }
  to {
    transform: translate(83.2159vw, 100vh) scale(0.4572);
  }
}
.snow:nth-child(46) {
  opacity: 0.8221;
  transform: translate(34.6398vw, -10px) scale(0.2017);
  animation: fall-46 26s -7s linear infinite;
}
@keyframes fall-46 {
  79.81% {
    transform: translate(36.3181vw, 79.81vh) scale(0.2017);
  }
  to {
    transform: translate(35.47895vw, 100vh) scale(0.2017);
  }
}
.snow:nth-child(47) {
  opacity: 0.4559;
  transform: translate(96.4537vw, -10px) scale(0.6715);
  animation: fall-47 14s -16s linear infinite;
}
@keyframes fall-47 {
  45.557% {
    transform: translate(90.9709vw, 45.557vh) scale(0.6715);
  }
  to {
    transform: translate(93.7123vw, 100vh) scale(0.6715);
  }
}
.snow:nth-child(48) {
  opacity: 0.4534;
  transform: translate(75.9183vw, -10px) scale(0.4547);
  animation: fall-48 28s -3s linear infinite;
}
@keyframes fall-48 {
  38.226% {
    transform: translate(79.7186vw, 38.226vh) scale(0.4547);
  }
  to {
    transform: translate(77.81845vw, 100vh) scale(0.4547);
  }
}
.snow:nth-child(49) {
  opacity: 0.3648;
  transform: translate(64.8247vw, -10px) scale(0.4629);
  animation: fall-49 26s -11s linear infinite;
}
@keyframes fall-49 {
  73.612% {
    transform: translate(67.668vw, 73.612vh) scale(0.4629);
  }
  to {
    transform: translate(66.24635vw, 100vh) scale(0.4629);
  }
}
.snow:nth-child(50) {
  opacity: 0.5809;
  transform: translate(67.8681vw, -10px) scale(0.708);
  animation: fall-50 26s -14s linear infinite;
}
@keyframes fall-50 {
  62.451% {
    transform: translate(77.2205vw, 62.451vh) scale(0.708);
  }
  to {
    transform: translate(72.5443vw, 100vh) scale(0.708);
  }
}
.snow:nth-child(51) {
  opacity: 0.4771;
  transform: translate(66.2611vw, -10px) scale(0.0758);
  animation: fall-51 20s -20s linear infinite;
}
@keyframes fall-51 {
  54.198% {
    transform: translate(60.3931vw, 54.198vh) scale(0.0758);
  }
  to {
    transform: translate(63.3271vw, 100vh) scale(0.0758);
  }
}
.snow:nth-child(52) {
  opacity: 0.8147;
  transform: translate(4.7326vw, -10px) scale(0.3789);
  animation: fall-52 25s -8s linear infinite;
}
@keyframes fall-52 {
  63.902% {
    transform: translate(6.0848vw, 63.902vh) scale(0.3789);
  }
  to {
    transform: translate(5.4087vw, 100vh) scale(0.3789);
  }
}
.snow:nth-child(53) {
  opacity: 0.8522;
  transform: translate(47.2548vw, -10px) scale(0.5123);
  animation: fall-53 26s -24s linear infinite;
}
@keyframes fall-53 {
  32.091% {
    transform: translate(48.3161vw, 32.091vh) scale(0.5123);
  }
  to {
    transform: translate(47.78545vw, 100vh) scale(0.5123);
  }
}
.snow:nth-child(54) {
  opacity: 0.2805;
  transform: translate(4.4421vw, -10px) scale(0.14);
  animation: fall-54 28s -6s linear infinite;
}
@keyframes fall-54 {
  47.707% {
    transform: translate(10.3757vw, 47.707vh) scale(0.14);
  }
  to {
    transform: translate(7.4089vw, 100vh) scale(0.14);
  }
}
.snow:nth-child(55) {
  opacity: 0.9566;
  transform: translate(10.1078vw, -10px) scale(0.9389);
  animation: fall-55 26s -28s linear infinite;
}
@keyframes fall-55 {
  32.832% {
    transform: translate(18.1197vw, 32.832vh) scale(0.9389);
  }
  to {
    transform: translate(14.11375vw, 100vh) scale(0.9389);
  }
}
.snow:nth-child(56) {
  opacity: 0.0043;
  transform: translate(34.8975vw, -10px) scale(0.4721);
  animation: fall-56 28s -1s linear infinite;
}
@keyframes fall-56 {
  53.748% {
    transform: translate(31.5072vw, 53.748vh) scale(0.4721);
  }
  to {
    transform: translate(33.20235vw, 100vh) scale(0.4721);
  }
}
.snow:nth-child(57) {
  opacity: 0.8963;
  transform: translate(83.1578vw, -10px) scale(0.3635);
  animation: fall-57 30s -16s linear infinite;
}
@keyframes fall-57 {
  32.099% {
    transform: translate(84.0708vw, 32.099vh) scale(0.3635);
  }
  to {
    transform: translate(83.6143vw, 100vh) scale(0.3635);
  }
}
.snow:nth-child(58) {
  opacity: 0.074;
  transform: translate(94.8477vw, -10px) scale(0.4808);
  animation: fall-58 30s -13s linear infinite;
}
@keyframes fall-58 {
  37.932% {
    transform: translate(93.6151vw, 37.932vh) scale(0.4808);
  }
  to {
    transform: translate(94.2314vw, 100vh) scale(0.4808);
  }
}
.snow:nth-child(59) {
  opacity: 0.5946;
  transform: translate(35.0129vw, -10px) scale(0.1405);
  animation: fall-59 17s -8s linear infinite;
}
@keyframes fall-59 {
  79.451% {
    transform: translate(35.9246vw, 79.451vh) scale(0.1405);
  }
  to {
    transform: translate(35.46875vw, 100vh) scale(0.1405);
  }
}
.snow:nth-child(60) {
  opacity: 0.0949;
  transform: translate(18.0365vw, -10px) scale(0.1342);
  animation: fall-60 26s -10s linear infinite;
}
@keyframes fall-60 {
  33.891% {
    transform: translate(17.4484vw, 33.891vh) scale(0.1342);
  }
  to {
    transform: translate(17.74245vw, 100vh) scale(0.1342);
  }
}
.snow:nth-child(61) {
  opacity: 0.1384;
  transform: translate(12.3229vw, -10px) scale(0.0511);
  animation: fall-61 30s -12s linear infinite;
}
@keyframes fall-61 {
  79.249% {
    transform: translate(2.5694vw, 79.249vh) scale(0.0511);
  }
  to {
    transform: translate(7.44615vw, 100vh) scale(0.0511);
  }
}
.snow:nth-child(62) {
  opacity: 0.3037;
  transform: translate(52.8679vw, -10px) scale(0.7978);
  animation: fall-62 30s -11s linear infinite;
}
@keyframes fall-62 {
  37.443% {
    transform: translate(53.341vw, 37.443vh) scale(0.7978);
  }
  to {
    transform: translate(53.10445vw, 100vh) scale(0.7978);
  }
}
.snow:nth-child(63) {
  opacity: 0.7767;
  transform: translate(34.2337vw, -10px) scale(0.1294);
  animation: fall-63 12s -12s linear infinite;
}
@keyframes fall-63 {
  42.026% {
    transform: translate(39.6541vw, 42.026vh) scale(0.1294);
  }
  to {
    transform: translate(36.9439vw, 100vh) scale(0.1294);
  }
}
.snow:nth-child(64) {
  opacity: 0.8159;
  transform: translate(72.155vw, -10px) scale(0.1831);
  animation: fall-64 23s -9s linear infinite;
}
@keyframes fall-64 {
  52.852% {
    transform: translate(65.6182vw, 52.852vh) scale(0.1831);
  }
  to {
    transform: translate(68.8866vw, 100vh) scale(0.1831);
  }
}
.snow:nth-child(65) {
  opacity: 0.1404;
  transform: translate(8.4839vw, -10px) scale(0.7095);
  animation: fall-65 27s -11s linear infinite;
}
@keyframes fall-65 {
  57.276% {
    transform: translate(6.3053vw, 57.276vh) scale(0.7095);
  }
  to {
    transform: translate(7.3946vw, 100vh) scale(0.7095);
  }
}
.snow:nth-child(66) {
  opacity: 0.7877;
  transform: translate(11.6942vw, -10px) scale(0.0026);
  animation: fall-66 12s -8s linear infinite;
}
@keyframes fall-66 {
  34.819% {
    transform: translate(6.7095vw, 34.819vh) scale(0.0026);
  }
  to {
    transform: translate(9.20185vw, 100vh) scale(0.0026);
  }
}
.snow:nth-child(67) {
  opacity: 0.5195;
  transform: translate(60.9526vw, -10px) scale(0.2791);
  animation: fall-67 16s -7s linear infinite;
}
@keyframes fall-67 {
  30.992% {
    transform: translate(60.0815vw, 30.992vh) scale(0.2791);
  }
  to {
    transform: translate(60.51705vw, 100vh) scale(0.2791);
  }
}
.snow:nth-child(68) {
  opacity: 0.0932;
  transform: translate(75.1487vw, -10px) scale(0.9166);
  animation: fall-68 14s -7s linear infinite;
}
@keyframes fall-68 {
  44.03% {
    transform: translate(66.4899vw, 44.03vh) scale(0.9166);
  }
  to {
    transform: translate(70.8193vw, 100vh) scale(0.9166);
  }
}
.snow:nth-child(69) {
  opacity: 0.9549;
  transform: translate(40.6311vw, -10px) scale(0.3282);
  animation: fall-69 17s -9s linear infinite;
}
@keyframes fall-69 {
  48.7% {
    transform: translate(46.3564vw, 48.7vh) scale(0.3282);
  }
  to {
    transform: translate(43.49375vw, 100vh) scale(0.3282);
  }
}
.snow:nth-child(70) {
  opacity: 0.9387;
  transform: translate(86.7582vw, -10px) scale(0.7735);
  animation: fall-70 15s -4s linear infinite;
}
@keyframes fall-70 {
  49.156% {
    transform: translate(93.8313vw, 49.156vh) scale(0.7735);
  }
  to {
    transform: translate(90.29475vw, 100vh) scale(0.7735);
  }
}
.snow:nth-child(71) {
  opacity: 0.0894;
  transform: translate(60.1645vw, -10px) scale(0.8211);
  animation: fall-71 11s -24s linear infinite;
}
@keyframes fall-71 {
  36.018% {
    transform: translate(55.6938vw, 36.018vh) scale(0.8211);
  }
  to {
    transform: translate(57.92915vw, 100vh) scale(0.8211);
  }
}
.snow:nth-child(72) {
  opacity: 0.152;
  transform: translate(77.3589vw, -10px) scale(0.9688);
  animation: fall-72 20s -12s linear infinite;
}
@keyframes fall-72 {
  48.987% {
    transform: translate(81.2811vw, 48.987vh) scale(0.9688);
  }
  to {
    transform: translate(79.32vw, 100vh) scale(0.9688);
  }
}
.snow:nth-child(73) {
  opacity: 0.2178;
  transform: translate(91.3311vw, -10px) scale(0.6987);
  animation: fall-73 23s -26s linear infinite;
}
@keyframes fall-73 {
  68.826% {
    transform: translate(97.6751vw, 68.826vh) scale(0.6987);
  }
  to {
    transform: translate(94.5031vw, 100vh) scale(0.6987);
  }
}
.snow:nth-child(74) {
  opacity: 0.3728;
  transform: translate(7.8311vw, -10px) scale(0.8087);
  animation: fall-74 14s -7s linear infinite;
}
@keyframes fall-74 {
  49.261% {
    transform: translate(-1.4697vw, 49.261vh) scale(0.8087);
  }
  to {
    transform: translate(3.1807vw, 100vh) scale(0.8087);
  }
}
.snow:nth-child(75) {
  opacity: 0.0219;
  transform: translate(47.4015vw, -10px) scale(0.3194);
  animation: fall-75 21s -25s linear infinite;
}
@keyframes fall-75 {
  54.313% {
    transform: translate(56.9081vw, 54.313vh) scale(0.3194);
  }
  to {
    transform: translate(52.1548vw, 100vh) scale(0.3194);
  }
}
.snow:nth-child(76) {
  opacity: 0.4758;
  transform: translate(15.5917vw, -10px) scale(0.925);
  animation: fall-76 11s -23s linear infinite;
}
@keyframes fall-76 {
  48.07% {
    transform: translate(22.5228vw, 48.07vh) scale(0.925);
  }
  to {
    transform: translate(19.05725vw, 100vh) scale(0.925);
  }
}
.snow:nth-child(77) {
  opacity: 0.5537;
  transform: translate(54.3267vw, -10px) scale(0.9796);
  animation: fall-77 14s -10s linear infinite;
}
@keyframes fall-77 {
  30.207% {
    transform: translate(54.8096vw, 30.207vh) scale(0.9796);
  }
  to {
    transform: translate(54.56815vw, 100vh) scale(0.9796);
  }
}
.snow:nth-child(78) {
  opacity: 0.2885;
  transform: translate(96.1782vw, -10px) scale(0.766);
  animation: fall-78 13s -17s linear infinite;
}
@keyframes fall-78 {
  55.817% {
    transform: translate(105.1295vw, 55.817vh) scale(0.766);
  }
  to {
    transform: translate(100.65385vw, 100vh) scale(0.766);
  }
}
.snow:nth-child(79) {
  opacity: 0.3131;
  transform: translate(12.0579vw, -10px) scale(0.8232);
  animation: fall-79 25s -26s linear infinite;
}
@keyframes fall-79 {
  49.002% {
    transform: translate(4.5855vw, 49.002vh) scale(0.8232);
  }
  to {
    transform: translate(8.3217vw, 100vh) scale(0.8232);
  }
}
.snow:nth-child(80) {
  opacity: 0.7947;
  transform: translate(28.0184vw, -10px) scale(0.9029);
  animation: fall-80 29s -10s linear infinite;
}
@keyframes fall-80 {
  58.928% {
    transform: translate(35.7337vw, 58.928vh) scale(0.9029);
  }
  to {
    transform: translate(31.87605vw, 100vh) scale(0.9029);
  }
}
.snow:nth-child(81) {
  opacity: 0.0094;
  transform: translate(6.8896vw, -10px) scale(0.1618);
  animation: fall-81 20s -1s linear infinite;
}
@keyframes fall-81 {
  44.438% {
    transform: translate(4.1082vw, 44.438vh) scale(0.1618);
  }
  to {
    transform: translate(5.4989vw, 100vh) scale(0.1618);
  }
}
.snow:nth-child(82) {
  opacity: 0.9311;
  transform: translate(12.2456vw, -10px) scale(0.8116);
  animation: fall-82 28s -28s linear infinite;
}
@keyframes fall-82 {
  36.821% {
    transform: translate(7.7485vw, 36.821vh) scale(0.8116);
  }
  to {
    transform: translate(9.99705vw, 100vh) scale(0.8116);
  }
}
.snow:nth-child(83) {
  opacity: 0.1935;
  transform: translate(20.213vw, -10px) scale(0.1735);
  animation: fall-83 11s -20s linear infinite;
}
@keyframes fall-83 {
  46.003% {
    transform: translate(23.428vw, 46.003vh) scale(0.1735);
  }
  to {
    transform: translate(21.8205vw, 100vh) scale(0.1735);
  }
}
.snow:nth-child(84) {
  opacity: 0.4561;
  transform: translate(43.4394vw, -10px) scale(0.4758);
  animation: fall-84 18s -21s linear infinite;
}
@keyframes fall-84 {
  65.168% {
    transform: translate(48.3666vw, 65.168vh) scale(0.4758);
  }
  to {
    transform: translate(45.903vw, 100vh) scale(0.4758);
  }
}
.snow:nth-child(85) {
  opacity: 0.2888;
  transform: translate(82.9075vw, -10px) scale(0.6875);
  animation: fall-85 29s -28s linear infinite;
}
@keyframes fall-85 {
  60.703% {
    transform: translate(76.2772vw, 60.703vh) scale(0.6875);
  }
  to {
    transform: translate(79.59235vw, 100vh) scale(0.6875);
  }
}
.snow:nth-child(86) {
  opacity: 0.9104;
  transform: translate(20.6285vw, -10px) scale(0.6381);
  animation: fall-86 21s -3s linear infinite;
}
@keyframes fall-86 {
  77.094% {
    transform: translate(11.7137vw, 77.094vh) scale(0.6381);
  }
  to {
    transform: translate(16.1711vw, 100vh) scale(0.6381);
  }
}
.snow:nth-child(87) {
  opacity: 0.408;
  transform: translate(96.4815vw, -10px) scale(0.5212);
  animation: fall-87 28s -28s linear infinite;
}
@keyframes fall-87 {
  67.13% {
    transform: translate(91.5623vw, 67.13vh) scale(0.5212);
  }
  to {
    transform: translate(94.0219vw, 100vh) scale(0.5212);
  }
}
.snow:nth-child(88) {
  opacity: 0.0025;
  transform: translate(55.8398vw, -10px) scale(0.8706);
  animation: fall-88 19s -15s linear infinite;
}
@keyframes fall-88 {
  37.735% {
    transform: translate(58.5744vw, 37.735vh) scale(0.8706);
  }
  to {
    transform: translate(57.2071vw, 100vh) scale(0.8706);
  }
}
.snow:nth-child(89) {
  opacity: 0.6628;
  transform: translate(11.6687vw, -10px) scale(0.1306);
  animation: fall-89 30s -22s linear infinite;
}
@keyframes fall-89 {
  53.037% {
    transform: translate(21.6023vw, 53.037vh) scale(0.1306);
  }
  to {
    transform: translate(16.6355vw, 100vh) scale(0.1306);
  }
}
.snow:nth-child(90) {
  opacity: 0.2471;
  transform: translate(49.0664vw, -10px) scale(0.3752);
  animation: fall-90 12s -25s linear infinite;
}
@keyframes fall-90 {
  46.211% {
    transform: translate(43.4561vw, 46.211vh) scale(0.3752);
  }
  to {
    transform: translate(46.26125vw, 100vh) scale(0.3752);
  }
}
.snow:nth-child(91) {
  opacity: 0.6132;
  transform: translate(55.0781vw, -10px) scale(0.6195);
  animation: fall-91 26s -21s linear infinite;
}
@keyframes fall-91 {
  63.834% {
    transform: translate(48.3233vw, 63.834vh) scale(0.6195);
  }
  to {
    transform: translate(51.7007vw, 100vh) scale(0.6195);
  }
}
.snow:nth-child(92) {
  opacity: 0.1849;
  transform: translate(50.6809vw, -10px) scale(0.8742);
  animation: fall-92 24s -11s linear infinite;
}
@keyframes fall-92 {
  39.46% {
    transform: translate(48.5834vw, 39.46vh) scale(0.8742);
  }
  to {
    transform: translate(49.63215vw, 100vh) scale(0.8742);
  }
}
.snow:nth-child(93) {
  opacity: 0.1865;
  transform: translate(12.0517vw, -10px) scale(0.8241);
  animation: fall-93 17s -8s linear infinite;
}
@keyframes fall-93 {
  41.094% {
    transform: translate(2.5634vw, 41.094vh) scale(0.8241);
  }
  to {
    transform: translate(7.30755vw, 100vh) scale(0.8241);
  }
}
.snow:nth-child(94) {
  opacity: 0.6617;
  transform: translate(68.727vw, -10px) scale(0.5984);
  animation: fall-94 14s -21s linear infinite;
}
@keyframes fall-94 {
  43.886% {
    transform: translate(67.0557vw, 43.886vh) scale(0.5984);
  }
  to {
    transform: translate(67.89135vw, 100vh) scale(0.5984);
  }
}
.snow:nth-child(95) {
  opacity: 0.5525;
  transform: translate(26.301vw, -10px) scale(0.0589);
  animation: fall-95 25s -15s linear infinite;
}
@keyframes fall-95 {
  42.971% {
    transform: translate(18.9214vw, 42.971vh) scale(0.0589);
  }
  to {
    transform: translate(22.6112vw, 100vh) scale(0.0589);
  }
}
.snow:nth-child(96) {
  opacity: 0.7717;
  transform: translate(80.3322vw, -10px) scale(0.3419);
  animation: fall-96 12s -10s linear infinite;
}
@keyframes fall-96 {
  33.208% {
    transform: translate(85.3652vw, 33.208vh) scale(0.3419);
  }
  to {
    transform: translate(82.8487vw, 100vh) scale(0.3419);
  }
}
.snow:nth-child(97) {
  opacity: 0.6656;
  transform: translate(73.7827vw, -10px) scale(0.2447);
  animation: fall-97 19s -27s linear infinite;
}
@keyframes fall-97 {
  55.874% {
    transform: translate(66.6586vw, 55.874vh) scale(0.2447);
  }
  to {
    transform: translate(70.22065vw, 100vh) scale(0.2447);
  }
}
.snow:nth-child(98) {
  opacity: 0.3377;
  transform: translate(34.5365vw, -10px) scale(0.5859);
  animation: fall-98 23s -26s linear infinite;
}
@keyframes fall-98 {
  47.893% {
    transform: translate(27.3159vw, 47.893vh) scale(0.5859);
  }
  to {
    transform: translate(30.9262vw, 100vh) scale(0.5859);
  }
}
.snow:nth-child(99) {
  opacity: 0.3697;
  transform: translate(70.1758vw, -10px) scale(0.9505);
  animation: fall-99 15s -4s linear infinite;
}
@keyframes fall-99 {
  30.429% {
    transform: translate(65.9439vw, 30.429vh) scale(0.9505);
  }
  to {
    transform: translate(68.05985vw, 100vh) scale(0.9505);
  }
}
.snow:nth-child(100) {
  opacity: 0.5223;
  transform: translate(41.6455vw, -10px) scale(0.8007);
  animation: fall-100 12s -3s linear infinite;
}
@keyframes fall-100 {
  67.499% {
    transform: translate(33.1078vw, 67.499vh) scale(0.8007);
  }
  to {
    transform: translate(37.37665vw, 100vh) scale(0.8007);
  }
}
.snow:nth-child(101) {
  opacity: 0.3873;
  transform: translate(57.6418vw, -10px) scale(0.3927);
  animation: fall-101 10s -14s linear infinite;
}
@keyframes fall-101 {
  43.718% {
    transform: translate(54.0299vw, 43.718vh) scale(0.3927);
  }
  to {
    transform: translate(55.83585vw, 100vh) scale(0.3927);
  }
}
.snow:nth-child(102) {
  opacity: 0.9531;
  transform: translate(58.7098vw, -10px) scale(0.2682);
  animation: fall-102 11s -19s linear infinite;
}
@keyframes fall-102 {
  45.897% {
    transform: translate(64.7876vw, 45.897vh) scale(0.2682);
  }
  to {
    transform: translate(61.7487vw, 100vh) scale(0.2682);
  }
}
.snow:nth-child(103) {
  opacity: 0.7487;
  transform: translate(12.5227vw, -10px) scale(0.483);
  animation: fall-103 16s -7s linear infinite;
}
@keyframes fall-103 {
  44.322% {
    transform: translate(3.6879vw, 44.322vh) scale(0.483);
  }
  to {
    transform: translate(8.1053vw, 100vh) scale(0.483);
  }
}
.snow:nth-child(104) {
  opacity: 0.1976;
  transform: translate(69.3404vw, -10px) scale(0.1248);
  animation: fall-104 12s -12s linear infinite;
}
@keyframes fall-104 {
  76.865% {
    transform: translate(66.025vw, 76.865vh) scale(0.1248);
  }
  to {
    transform: translate(67.6827vw, 100vh) scale(0.1248);
  }
}
.snow:nth-child(105) {
  opacity: 0.2229;
  transform: translate(14.2252vw, -10px) scale(0.6523);
  animation: fall-105 16s -2s linear infinite;
}
@keyframes fall-105 {
  57.545% {
    transform: translate(10.1061vw, 57.545vh) scale(0.6523);
  }
  to {
    transform: translate(12.16565vw, 100vh) scale(0.6523);
  }
}
.snow:nth-child(106) {
  opacity: 0.3726;
  transform: translate(96.8816vw, -10px) scale(0.1062);
  animation: fall-106 17s -11s linear infinite;
}
@keyframes fall-106 {
  43.976% {
    transform: translate(87.558vw, 43.976vh) scale(0.1062);
  }
  to {
    transform: translate(92.2198vw, 100vh) scale(0.1062);
  }
}
.snow:nth-child(107) {
  opacity: 0.225;
  transform: translate(83.7802vw, -10px) scale(0.6239);
  animation: fall-107 25s -4s linear infinite;
}
@keyframes fall-107 {
  46.148% {
    transform: translate(82.4454vw, 46.148vh) scale(0.6239);
  }
  to {
    transform: translate(83.1128vw, 100vh) scale(0.6239);
  }
}
.snow:nth-child(108) {
  opacity: 0.3924;
  transform: translate(1.134vw, -10px) scale(0.7711);
  animation: fall-108 11s -22s linear infinite;
}
@keyframes fall-108 {
  66.616% {
    transform: translate(-0.5473vw, 66.616vh) scale(0.7711);
  }
  to {
    transform: translate(0.29335vw, 100vh) scale(0.7711);
  }
}
.snow:nth-child(109) {
  opacity: 0.6798;
  transform: translate(42.9564vw, -10px) scale(0.8778);
  animation: fall-109 22s -29s linear infinite;
}
@keyframes fall-109 {
  73.163% {
    transform: translate(39.5449vw, 73.163vh) scale(0.8778);
  }
  to {
    transform: translate(41.25065vw, 100vh) scale(0.8778);
  }
}
.snow:nth-child(110) {
  opacity: 0.8682;
  transform: translate(66.8288vw, -10px) scale(0.2217);
  animation: fall-110 21s -7s linear infinite;
}
@keyframes fall-110 {
  61.419% {
    transform: translate(68.7116vw, 61.419vh) scale(0.2217);
  }
  to {
    transform: translate(67.7702vw, 100vh) scale(0.2217);
  }
}
.snow:nth-child(111) {
  opacity: 0.1121;
  transform: translate(8.6192vw, -10px) scale(0.3673);
  animation: fall-111 28s -12s linear infinite;
}
@keyframes fall-111 {
  43.678% {
    transform: translate(3.7925vw, 43.678vh) scale(0.3673);
  }
  to {
    transform: translate(6.20585vw, 100vh) scale(0.3673);
  }
}
.snow:nth-child(112) {
  opacity: 0.1722;
  transform: translate(79.2307vw, -10px) scale(0.2251);
  animation: fall-112 16s -29s linear infinite;
}
@keyframes fall-112 {
  71.127% {
    transform: translate(75.3423vw, 71.127vh) scale(0.2251);
  }
  to {
    transform: translate(77.2865vw, 100vh) scale(0.2251);
  }
}
.snow:nth-child(113) {
  opacity: 0.0227;
  transform: translate(18.8909vw, -10px) scale(0.8353);
  animation: fall-113 29s -20s linear infinite;
}
@keyframes fall-113 {
  70.546% {
    transform: translate(13.2875vw, 70.546vh) scale(0.8353);
  }
  to {
    transform: translate(16.0892vw, 100vh) scale(0.8353);
  }
}
.snow:nth-child(114) {
  opacity: 0.867;
  transform: translate(10.7747vw, -10px) scale(0.3742);
  animation: fall-114 21s -3s linear infinite;
}
@keyframes fall-114 {
  42.195% {
    transform: translate(18.895vw, 42.195vh) scale(0.3742);
  }
  to {
    transform: translate(14.83485vw, 100vh) scale(0.3742);
  }
}
.snow:nth-child(115) {
  opacity: 0.415;
  transform: translate(93.034vw, -10px) scale(0.4661);
  animation: fall-115 20s -4s linear infinite;
}
@keyframes fall-1.........完整代码请登录后点击上方下载按钮下载查看