div+css实现粒子下雪动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：粒子
代码描述：div+css实现粒子下雪动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
  
<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.9818;
  transform: translate(81.7356vw, -10px) scale(0.8547);
  animation: fall-1 30s -26s linear infinite;
}
@keyframes fall-1 {
  68.938% {
    transform: translate(76.1687vw, 68.938vh) scale(0.8547);
  }
  to {
    transform: translate(78.95215vw, 100vh) scale(0.8547);
  }
}
.snow:nth-child(2) {
  opacity: 0.7927;
  transform: translate(81.408vw, -10px) scale(0.3246);
  animation: fall-2 30s -1s linear infinite;
}
@keyframes fall-2 {
  71.03% {
    transform: translate(86.7096vw, 71.03vh) scale(0.3246);
  }
  to {
    transform: translate(84.0588vw, 100vh) scale(0.3246);
  }
}
.snow:nth-child(3) {
  opacity: 0.6802;
  transform: translate(87.1845vw, -10px) scale(0.4509);
  animation: fall-3 16s -11s linear infinite;
}
@keyframes fall-3 {
  38.366% {
    transform: translate(96.5161vw, 38.366vh) scale(0.4509);
  }
  to {
    transform: translate(91.8503vw, 100vh) scale(0.4509);
  }
}
.snow:nth-child(4) {
  opacity: 0.4444;
  transform: translate(65.1009vw, -10px) scale(0.6698);
  animation: fall-4 24s -17s linear infinite;
}
@keyframes fall-4 {
  34.398% {
    transform: translate(73.2437vw, 34.398vh) scale(0.6698);
  }
  to {
    transform: translate(69.1723vw, 100vh) scale(0.6698);
  }
}
.snow:nth-child(5) {
  opacity: 0.164;
  transform: translate(73.8514vw, -10px) scale(0.4858);
  animation: fall-5 10s -11s linear infinite;
}
@keyframes fall-5 {
  61.226% {
    transform: translate(76.8458vw, 61.226vh) scale(0.4858);
  }
  to {
    transform: translate(75.3486vw, 100vh) scale(0.4858);
  }
}
.snow:nth-child(6) {
  opacity: 0.6211;
  transform: translate(44.6464vw, -10px) scale(0.6561);
  animation: fall-6 28s -27s linear infinite;
}
@keyframes fall-6 {
  62.3% {
    transform: translate(34.7391vw, 62.3vh) scale(0.6561);
  }
  to {
    transform: translate(39.69275vw, 100vh) scale(0.6561);
  }
}
.snow:nth-child(7) {
  opacity: 0.0194;
  transform: translate(25.3205vw, -10px) scale(0.0603);
  animation: fall-7 24s -4s linear infinite;
}
@keyframes fall-7 {
  56.194% {
    transform: translate(26.2228vw, 56.194vh) scale(0.0603);
  }
  to {
    transform: translate(25.77165vw, 100vh) scale(0.0603);
  }
}
.snow:nth-child(8) {
  opacity: 0.0187;
  transform: translate(37.7417vw, -10px) scale(0.4809);
  animation: fall-8 25s -1s linear infinite;
}
@keyframes fall-8 {
  38.688% {
    transform: translate(36.5231vw, 38.688vh) scale(0.4809);
  }
  to {
    transform: translate(37.1324vw, 100vh) scale(0.4809);
  }
}
.snow:nth-child(9) {
  opacity: 0.4178;
  transform: translate(93.3927vw, -10px) scale(0.6071);
  animation: fall-9 18s -28s linear infinite;
}
@keyframes fall-9 {
  51.226% {
    transform: translate(101.9272vw, 51.226vh) scale(0.6071);
  }
  to {
    transform: translate(97.65995vw, 100vh) scale(0.6071);
  }
}
.snow:nth-child(10) {
  opacity: 0.8841;
  transform: translate(90.8504vw, -10px) scale(0.7172);
  animation: fall-10 11s -15s linear infinite;
}
@keyframes fall-10 {
  37.878% {
    transform: translate(98.6797vw, 37.878vh) scale(0.7172);
  }
  to {
    transform: translate(94.76505vw, 100vh) scale(0.7172);
  }
}
.snow:nth-child(11) {
  opacity: 0.3492;
  transform: translate(28.8665vw, -10px) scale(0.924);
  animation: fall-11 28s -6s linear infinite;
}
@keyframes fall-11 {
  79.071% {
    transform: translate(27.4515vw, 79.071vh) scale(0.924);
  }
  to {
    transform: translate(28.159vw, 100vh) scale(0.924);
  }
}
.snow:nth-child(12) {
  opacity: 0.3734;
  transform: translate(44.1357vw, -10px) scale(0.4985);
  animation: fall-12 25s -1s linear infinite;
}
@keyframes fall-12 {
  78.538% {
    transform: translate(37.5508vw, 78.538vh) scale(0.4985);
  }
  to {
    transform: translate(40.84325vw, 100vh) scale(0.4985);
  }
}
.snow:nth-child(13) {
  opacity: 0.6116;
  transform: translate(4.8403vw, -10px) scale(0.32);
  animation: fall-13 19s -4s linear infinite;
}
@keyframes fall-13 {
  74.616% {
    transform: translate(-1.3541vw, 74.616vh) scale(0.32);
  }
  to {
    transform: translate(1.7431vw, 100vh) scale(0.32);
  }
}
.snow:nth-child(14) {
  opacity: 0.3666;
  transform: translate(42.7068vw, -10px) scale(0.6506);
  animation: fall-14 20s -28s linear infinite;
}
@keyframes fall-14 {
  69.427% {
    transform: translate(37.918vw, 69.427vh) scale(0.6506);
  }
  to {
    transform: translate(40.3124vw, 100vh) scale(0.6506);
  }
}
.snow:nth-child(15) {
  opacity: 0.1556;
  transform: translate(20.677vw, -10px) scale(0.005);
  animation: fall-15 14s -25s linear infinite;
}
@keyframes fall-15 {
  32.762% {
    transform: translate(23.7964vw, 32.762vh) scale(0.005);
  }
  to {
    transform: translate(22.2367vw, 100vh) scale(0.005);
  }
}
.snow:nth-child(16) {
  opacity: 0.3707;
  transform: translate(76.1264vw, -10px) scale(0.0353);
  animation: fall-16 14s -20s linear infinite;
}
@keyframes fall-16 {
  59.597% {
    transform: translate(74.4944vw, 59.597vh) scale(0.0353);
  }
  to {
    transform: translate(75.3104vw, 100vh) scale(0.0353);
  }
}
.snow:nth-child(17) {
  opacity: 0.383;
  transform: translate(27.7088vw, -10px) scale(0.8541);
  animation: fall-17 30s -17s linear infinite;
}
@keyframes fall-17 {
  45.184% {
    transform: translate(35.5452vw, 45.184vh) scale(0.8541);
  }
  to {
    transform: translate(31.627vw, 100vh) scale(0.8541);
  }
}
.snow:nth-child(18) {
  opacity: 0.1156;
  transform: translate(58.8956vw, -10px) scale(0.802);
  animation: fall-18 23s -18s linear infinite;
}
@keyframes fall-18 {
  59.235% {
    transform: translate(54.4594vw, 59.235vh) scale(0.802);
  }
  to {
    transform: translate(56.6775vw, 100vh) scale(0.802);
  }
}
.snow:nth-child(19) {
  opacity: 0.3951;
  transform: translate(67.7997vw, -10px) scale(0.5341);
  animation: fall-19 21s -15s linear infinite;
}
@keyframes fall-19 {
  55.238% {
    transform: translate(65.8486vw, 55.238vh) scale(0.5341);
  }
  to {
    transform: translate(66.82415vw, 100vh) scale(0.5341);
  }
}
.snow:nth-child(20) {
  opacity: 0.9318;
  transform: translate(44.4314vw, -10px) scale(0.2171);
  animation: fall-20 29s -26s linear infinite;
}
@keyframes fall-20 {
  43.114% {
    transform: translate(35.7082vw, 43.114vh) scale(0.2171);
  }
  to {
    transform: translate(40.0698vw, 100vh) scale(0.2171);
  }
}
.snow:nth-child(21) {
  opacity: 0.1049;
  transform: translate(13.5832vw, -10px) scale(0.4339);
  animation: fall-21 20s -23s linear infinite;
}
@keyframes fall-21 {
  48.302% {
    transform: translate(17.2383vw, 48.302vh) scale(0.4339);
  }
  to {
    transform: translate(15.41075vw, 100vh) scale(0.4339);
  }
}
.snow:nth-child(22) {
  opacity: 0.9077;
  transform: translate(31.6423vw, -10px) scale(0.977);
  animation: fall-22 28s -16s linear infinite;
}
@keyframes fall-22 {
  36.17% {
    transform: translate(23.2344vw, 36.17vh) scale(0.977);
  }
  to {
    transform: translate(27.43835vw, 100vh) scale(0.977);
  }
}
.snow:nth-child(23) {
  opacity: 0.0487;
  transform: translate(45.4516vw, -10px) scale(0.7224);
  animation: fall-23 11s -29s linear infinite;
}
@keyframes fall-23 {
  58.591% {
    transform: translate(38.5025vw, 58.591vh) scale(0.7224);
  }
  to {
    transform: translate(41.97705vw, 100vh) scale(0.7224);
  }
}
.snow:nth-child(24) {
  opacity: 0.177;
  transform: translate(69.5464vw, -10px) scale(0.2255);
  animation: fall-24 21s -8s linear infinite;
}
@keyframes fall-24 {
  78.265% {
    transform: translate(75.6113vw, 78.265vh) scale(0.2255);
  }
  to {
    transform: translate(72.57885vw, 100vh) scale(0.2255);
  }
}
.snow:nth-child(25) {
  opacity: 0.8197;
  transform: translate(11.0362vw, -10px) scale(0.4901);
  animation: fall-25 19s -26s linear infinite;
}
@keyframes fall-25 {
  31.561% {
    transform: translate(12.4818vw, 31.561vh) scale(0.4901);
  }
  to {
    transform: translate(11.759vw, 100vh) scale(0.4901);
  }
}
.snow:nth-child(26) {
  opacity: 0.4553;
  transform: translate(51.9211vw, -10px) scale(0.9779);
  animation: fall-26 11s -6s linear infinite;
}
@keyframes fall-26 {
  50.638% {
    transform: translate(43.7923vw, 50.638vh) scale(0.9779);
  }
  to {
    transform: translate(47.8567vw, 100vh) scale(0.9779);
  }
}
.snow:nth-child(27) {
  opacity: 0.3188;
  transform: translate(76.2232vw, -10px) scale(0.6598);
  animation: fall-27 20s -13s linear infinite;
}
@keyframes fall-27 {
  46.404% {
    transform: translate(70.2727vw, 46.404vh) scale(0.6598);
  }
  to {
    transform: translate(73.24795vw, 100vh) scale(0.6598);
  }
}
.snow:nth-child(28) {
  opacity: 0.9548;
  transform: translate(8.9649vw, -10px) scale(0.5571);
  animation: fall-28 15s -17s linear infinite;
}
@keyframes fall-28 {
  57.586% {
    transform: translate(8.211vw, 57.586vh) scale(0.5571);
  }
  to {
    transform: translate(8.58795vw, 100vh) scale(0.5571);
  }
}
.snow:nth-child(29) {
  opacity: 0.3537;
  transform: translate(8.6252vw, -10px) scale(0.0773);
  animation: fall-29 27s -11s linear infinite;
}
@keyframes fall-29 {
  59.918% {
    transform: translate(15.606vw, 59.918vh) scale(0.0773);
  }
  to {
    transform: translate(12.1156vw, 100vh) scale(0.0773);
  }
}
.snow:nth-child(30) {
  opacity: 0.5268;
  transform: translate(28.8707vw, -10px) scale(0.3765);
  animation: fall-30 21s -7s linear infinite;
}
@keyframes fall-30 {
  39.866% {
    transform: translate(33.3949vw, 39.866vh) scale(0.3765);
  }
  to {
    transform: translate(31.1328vw, 100vh) scale(0.3765);
  }
}
.snow:nth-child(31) {
  opacity: 0.6316;
  transform: translate(77.9513vw, -10px) scale(0.9699);
  animation: fall-31 13s -13s linear infinite;
}
@keyframes fall-31 {
  51.842% {
    transform: translate(83.3511vw, 51.842vh) scale(0.9699);
  }
  to {
    transform: translate(80.6512vw, 100vh) scale(0.9699);
  }
}
.snow:nth-child(32) {
  opacity: 0.417;
  transform: translate(58.402vw, -10px) scale(0.2852);
  animation: fall-32 12s -12s linear infinite;
}
@keyframes fall-32 {
  71.67% {
    transform: translate(66.9293vw, 71.67vh) scale(0.2852);
  }
  to {
    transform: translate(62.66565vw, 100vh) scale(0.2852);
  }
}
.snow:nth-child(33) {
  opacity: 0.1478;
  transform: translate(16.4042vw, -10px) scale(0.6466);
  animation: fall-33 24s -18s linear infinite;
}
@keyframes fall-33 {
  47.163% {
    transform: translate(22.8078vw, 47.163vh) scale(0.6466);
  }
  to {
    transform: translate(19.606vw, 100vh) scale(0.6466);
  }
}
.snow:nth-child(34) {
  opacity: 0.6332;
  transform: translate(43.8156vw, -10px) scale(0.1297);
  animation: fall-34 14s -4s linear infinite;
}
@keyframes fall-34 {
  76.663% {
    transform: translate(36.9195vw, 76.663vh) scale(0.1297);
  }
  to {
    transform: translate(40.36755vw, 100vh) scale(0.1297);
  }
}
.snow:nth-child(35) {
  opacity: 0.7257;
  transform: translate(27.5938vw, -10px) scale(0.1996);
  animation: fall-35 16s -8s linear infinite;
}
@keyframes fall-35 {
  74.361% {
    transform: translate(27.6272vw, 74.361vh) scale(0.1996);
  }
  to {
    transform: translate(27.6105vw, 100vh) scale(0.1996);
  }
}
.snow:nth-child(36) {
  opacity: 0.4914;
  transform: translate(59.351vw, -10px) scale(0.9894);
  animation: fall-36 21s -26s linear infinite;
}
@keyframes fall-36 {
  32.318% {
    transform: translate(67.9029vw, 32.318vh) scale(0.9894);
  }
  to {
    transform: translate(63.62695vw, 100vh) scale(0.9894);
  }
}
.snow:nth-child(37) {
  opacity: 0.3677;
  transform: translate(36.4869vw, -10px) scale(0.5718);
  animation: fall-37 19s -21s linear infinite;
}
@keyframes fall-37 {
  34.141% {
    transform: translate(36.0453vw, 34.141vh) scale(0.5718);
  }
  to {
    transform: translate(36.2661vw, 100vh) scale(0.5718);
  }
}
.snow:nth-child(38) {
  opacity: 0.7032;
  transform: translate(58.4837vw, -10px) scale(0.1064);
  animation: fall-38 12s -12s linear infinite;
}
@keyframes fall-38 {
  35.988% {
    transform: translate(61.8515vw, 35.988vh) scale(0.1064);
  }
  to {
    transform: translate(60.1676vw, 100vh) scale(0.1064);
  }
}
.snow:nth-child(39) {
  opacity: 0.4568;
  transform: translate(87.5287vw, -10px) scale(0.3572);
  animation: fall-39 21s -16s linear infinite;
}
@keyframes fall-39 {
  43.662% {
    transform: translate(89.9747vw, 43.662vh) scale(0.3572);
  }
  to {
    transform: translate(88.7517vw, 100vh) scale(0.3572);
  }
}
.snow:nth-child(40) {
  opacity: 0.692;
  transform: translate(37.7536vw, -10px) scale(0.1034);
  animation: fall-40 20s -20s linear infinite;
}
@keyframes fall-40 {
  47.079% {
    transform: translate(29.8358vw, 47.079vh) scale(0.1034);
  }
  to {
    transform: translate(33.7947vw, 100vh) scale(0.1034);
  }
}
.snow:nth-child(41) {
  opacity: 0.9817;
  transform: translate(11.8116vw, -10px) scale(0.9532);
  animation: fall-41 29s -7s linear infinite;
}
@keyframes fall-41 {
  38.48% {
    transform: translate(8.1344vw, 38.48vh) scale(0.9532);
  }
  to {
    transform: translate(9.973vw, 100vh) scale(0.9532);
  }
}
.snow:nth-child(42) {
  opacity: 0.719;
  transform: translate(94.6673vw, -10px) scale(0.4352);
  animation: fall-42 21s -20s linear infinite;
}
@keyframes fall-42 {
  66.063% {
    transform: translate(103.2206vw, 66.063vh) scale(0.4352);
  }
  to {
    transform: translate(98.94395vw, 100vh) scale(0.4352);
  }
}
.snow:nth-child(43) {
  opacity: 0.5197;
  transform: translate(82.5044vw, -10px) scale(0.783);
  animation: fall-43 22s -25s linear infinite;
}
@keyframes fall-43 {
  60.912% {
    transform: translate(84.5828vw, 60.912vh) scale(0.783);
  }
  to {
    transform: translate(83.5436vw, 100vh) scale(0.783);
  }
}
.snow:nth-child(44) {
  opacity: 0.1458;
  transform: translate(79.5215vw, -10px) scale(0.5419);
  animation: fall-44 28s -10s linear infinite;
}
@keyframes fall-44 {
  73.605% {
    transform: translate(74.9847vw, 73.605vh) scale(0.5419);
  }
  to {
    transform: translate(77.2531vw, 100vh) scale(0.5419);
  }
}
.snow:nth-child(45) {
  opacity: 0.7388;
  transform: translate(4.6979vw, -10px) scale(0.3198);
  animation: fall-45 12s -25s linear infinite;
}
@keyframes fall-45 {
  64.377% {
    transform: translate(11.7319vw, 64.377vh) scale(0.3198);
  }
  to {
    transform: translate(8.2149vw, 100vh) scale(0.3198);
  }
}
.snow:nth-child(46) {
  opacity: 0.7544;
  transform: translate(61.6787vw, -10px) scale(0.563);
  animation: fall-46 17s -23s linear infinite;
}
@keyframes fall-46 {
  62.489% {
    transform: translate(62.2968vw, 62.489vh) scale(0.563);
  }
  to {
    transform: translate(61.98775vw, 100vh) scale(0.563);
  }
}
.snow:nth-child(47) {
  opacity: 0.4303;
  transform: translate(2.517vw, -10px) scale(0.7988);
  animation: fall-47 28s -7s linear infinite;
}
@keyframes fall-47 {
  46.688% {
    transform: translate(3.7951vw, 46.688vh) scale(0.7988);
  }
  to {
    transform: translate(3.15605vw, 100vh) scale(0.7988);
  }
}
.snow:nth-child(48) {
  opacity: 0.9378;
  transform: translate(26.2978vw, -10px) scale(0.59);
  animation: fall-48 15s -29s linear infinite;
}
@keyframes fall-48 {
  74.813% {
    transform: translate(22.67vw, 74.813vh) scale(0.59);
  }
  to {
    transform: translate(24.4839vw, 100vh) scale(0.59);
  }
}
.snow:nth-child(49) {
  opacity: 0.0123;
  transform: translate(6.3931vw, -10px) scale(0.8583);
  animation: fall-49 27s -15s linear infinite;
}
@keyframes fall-49 {
  35.724% {
    transform: translate(-2.2422vw, 35.724vh) scale(0.8583);
  }
  to {
    transform: translate(2.07545vw, 100vh) scale(0.8583);
  }
}
.snow:nth-child(50) {
  opacity: 0.7438;
  transform: translate(11.3823vw, -10px) scale(0.8379);
  animation: fall-50 16s -7s linear infinite;
}
@keyframes fall-50 {
  38.374% {
    transform: translate(14.5413vw, 38.374vh) scale(0.8379);
  }
  to {
    transform: translate(12.9618vw, 100vh) scale(0.8379);
  }
}
.snow:nth-child(51) {
  opacity: 0.6784;
  transform: translate(23.3228vw, -10px) scale(0.2632);
  animation: fall-51 26s -8s linear infinite;
}
@keyframes fall-51 {
  39.043% {
    transform: translate(27.3605vw, 39.043vh) scale(0.2632);
  }
  to {
    transform: translate(25.34165vw, 100vh) scale(0.2632);
  }
}
.snow:nth-child(52) {
  opacity: 0.2655;
  transform: translate(39.0468vw, -10px) scale(0.3902);
  animation: fall-52 27s -11s linear infinite;
}
@keyframes fall-52 {
  62.145% {
    transform: translate(47.1129vw, 62.145vh) scale(0.3902);
  }
  to {
    transform: translate(43.07985vw, 100vh) scale(0.3902);
  }
}
.snow:nth-child(53) {
  opacity: 0.5934;
  transform: translate(76.9364vw, -10px) scale(0.8334);
  animation: fall-53 27s -18s linear infinite;
}
@keyframes fall-53 {
  59.261% {
    transform: translate(79.2157vw, 59.261vh) scale(0.8334);
  }
  to {
    transform: translate(78.07605vw, 100vh) scale(0.8334);
  }
}
.snow:nth-child(54) {
  opacity: 0.8104;
  transform: translate(91.1314vw, -10px) scale(0.9003);
  animation: fall-54 24s -8s linear infinite;
}
@keyframes fall-54 {
  40.254% {
    transform: translate(98.4205vw, 40.254vh) scale(0.9003);
  }
  to {
    transform: translate(94.77595vw, 100vh) scale(0.9003);
  }
}
.snow:nth-child(55) {
  opacity: 0.4629;
  transform: translate(93.8138vw, -10px) scale(0.9217);
  animation: fall-55 29s -24s linear infinite;
}
@keyframes fall-55 {
  68.475% {
    transform: translate(92.4596vw, 68.475vh) scale(0.9217);
  }
  to {
    transform: translate(93.1367vw, 100vh) scale(0.9217);
  }
}
.snow:nth-child(56) {
  opacity: 0.5956;
  transform: translate(64.5002vw, -10px) scale(0.536);
  animation: fall-56 11s -25s linear infinite;
}
@keyframes fall-56 {
  36.959% {
    transform: translate(66.5373vw, 36.959vh) scale(0.536);
  }
  to {
    transform: translate(65.51875vw, 100vh) scale(0.536);
  }
}
.snow:nth-child(57) {
  opacity: 0.0039;
  transform: translate(42.4107vw, -10px) scale(0.6996);
  animation: fall-57 22s -7s linear infinite;
}
@keyframes fall-57 {
  31.256% {
    transform: translate(50.4333vw, 31.256vh) scale(0.6996);
  }
  to {
    transform: translate(46.422vw, 100vh) scale(0.6996);
  }
}
.snow:nth-child(58) {
  opacity: 0.3028;
  transform: translate(69.7171vw, -10px) scale(0.3985);
  animation: fall-58 23s -29s linear infinite;
}
@keyframes fall-58 {
  33.565% {
    transform: translate(64.2083vw, 33.565vh) scale(0.3985);
  }
  to {
    transform: translate(66.9627vw, 100vh) scale(0.3985);
  }
}
.snow:nth-child(59) {
  opacity: 0.9848;
  transform: translate(82.1553vw, -10px) scale(0.4017);
  animation: fall-59 23s -20s linear infinite;
}
@keyframes fall-59 {
  46.15% {
    transform: translate(76.294vw, 46.15vh) scale(0.4017);
  }
  to {
    transform: translate(79.22465vw, 100vh) scale(0.4017);
  }
}
.snow:nth-child(60) {
  opacity: 0.6101;
  transform: translate(89.1613vw, -10px) scale(0.645);
  animation: fall-60 15s -7s linear infinite;
}
@keyframes fall-60 {
  46.443% {
    transform: translate(94.2995vw, 46.443vh) scale(0.645);
  }
  to {
    transform: translate(91.7304vw, 100vh) scale(0.645);
  }
}
.snow:nth-child(61) {
  opacity: 0.4188;
  transform: translate(43.4443vw, -10px) scale(0.4861);
  animation: fall-61 25s -2s linear infinite;
}
@keyframes fall-61 {
  54.582% {
    transform: translate(47.5433vw, 54.582vh) scale(0.4861);
  }
  to {
    transform: translate(45.4938vw, 100vh) scale(0.4861);
  }
}
.snow:nth-child(62) {
  opacity: 0.5189;
  transform: translate(15.3916vw, -10px) scale(0.7456);
  animation: fall-62 13s -1s linear infinite;
}
@keyframes fall-62 {
  69.916% {
    transform: translate(20.0018vw, 69.916vh) scale(0.7456);
  }
  to {
    transform: translate(17.6967vw, 100vh) scale(0.7456);
  }
}
.snow:nth-child(63) {
  opacity: 0.0814;
  transform: translate(29.8746vw, -10px) scale(0.4994);
  animation: fall-63 19s -4s linear infinite;
}
@keyframes fall-63 {
  42.4% {
    transform: translate(35.6185vw, 42.4vh) scale(0.4994);
  }
  to {
    transform: translate(32.74655vw, 100vh) scale(0.4994);
  }
}
.snow:nth-child(64) {
  opacity: 0.3233;
  transform: translate(2.0646vw, -10px) scale(0.4947);
  animation: fall-64 27s -27s linear infinite;
}
@keyframes fall-64 {
  62.037% {
    transform: translate(-3.3115vw, 62.037vh) scale(0.4947);
  }
  to {
    transform: translate(-0.62345vw, 100vh) scale(0.4947);
  }
}
.snow:nth-child(65) {
  opacity: 0.2835;
  transform: translate(36.4497vw, -10px) scale(0.9582);
  animation: fall-65 18s -6s linear infinite;
}
@keyframes fall-65 {
  77.474% {
    transform: translate(33.6947vw, 77.474vh) scale(0.9582);
  }
  to {
    transform: translate(35.0722vw, 100vh) scale(0.9582);
  }
}
.snow:nth-child(66) {
  opacity: 0.7176;
  transform: translate(86.017vw, -10px) scale(0.2037);
  animation: fall-66 13s -26s linear infinite;
}
@keyframes fall-66 {
  56.841% {
    transform: translate(80.9618vw, 56.841vh) scale(0.2037);
  }
  to {
    transform: translate(83.4894vw, 100vh) scale(0.2037);
  }
}
.snow:nth-child(67) {
  opacity: 0.9834;
  transform: translate(23.3777vw, -10px) scale(0.1357);
  animation: fall-67 17s -14s linear infinite;
}
@keyframes fall-67 {
  36.617% {
    transform: translate(30.8007vw, 36.617vh) scale(0.1357);
  }
  to {
    transform: translate(27.0892vw, 100vh) scale(0.1357);
  }
}
.snow:nth-child(68) {
  opacity: 0.101;
  transform: translate(36.2904vw, -10px) scale(0.953);
  animation: fall-68 29s -1s linear infinite;
}
@keyframes fall-68 {
  52.309% {
    transform: translate(44.0491vw, 52.309vh) scale(0.953);
  }
  to {
    transform: translate(40.16975vw, 100vh) scale(0.953);
  }
}
.snow:nth-child(69) {
  opacity: 0.9516;
  transform: translate(41.915vw, -10px) scale(0.007);
  animation: fall-69 10s -14s linear infinite;
}
@keyframes fall-69 {
  49.264% {
    transform: translate(42.3113vw, 49.264vh) scale(0.007);
  }
  to {
    transform: translate(42.11315vw, 100vh) scale(0.007);
  }
}
.snow:nth-child(70) {
  opacity: 0.7037;
  transform: translate(20.7742vw, -10px) scale(0.5518);
  animation: fall-70 22s -3s linear infinite;
}
@keyframes fall-70 {
  35.039% {
    transform: translate(14.8065vw, 35.039vh) scale(0.5518);
  }
  to {
    transform: translate(17.79035vw, 100vh) scale(0.5518);
  }
}
.snow:nth-child(71) {
  opacity: 0.5021;
  transform: translate(16.003vw, -10px) scale(0.5604);
  animation: fall-71 24s -9s linear infinite;
}
@keyframes fall-71 {
  43.609% {
    transform: translate(25.9808vw, 43.609vh) scale(0.5604);
  }
  to {
    transform: translate(20.9919vw, 100vh) scale(0.5604);
  }
}
.snow:nth-child(72) {
  opacity: 0.6135;
  transform: translate(72.0104vw, -10px) scale(0.5702);
  animation: fall-72 19s -21s linear infinite;
}
@keyframes fall-72 {
  75.051% {
    transform: translate(71.0886vw, 75.051vh) scale(0.5702);
  }
  to {
    transform: translate(71.5495vw, 100vh) scale(0.5702);
  }
}
.snow:nth-child(73) {
  opacity: 0.737;
  transform: translate(47.0612vw, -10px) scale(0.2053);
  animation: fall-73 25s -16s linear infinite;
}
@keyframes fall-73 {
  53.681% {
    transform: translate(44.6206vw, 53.681vh) scale(0.2053);
  }
  to {
    transform: translate(45.8409vw, 100vh) scale(0.2053);
  }
}
.snow:nth-child(74) {
  opacity: 0.3051;
  transform: translate(5.438vw, -10px) scale(0.6253);
  animation: fall-74 18s -13s linear infinite;
}
@keyframes fall-74 {
  34.3% {
    transform: translate(7.3138vw, 34.3vh) scale(0.6253);
  }
  to {
    transform: translate(6.3759vw, 100vh) scale(0.6253);
  }
}
.snow:nth-child(75) {
  opacity: 0.0652;
  transform: translate(38.9683vw, -10px) scale(0.3695);
  animation: fall-75 21s -28s linear infinite;
}
@keyframes fall-75 {
  56.212% {
    transform: translate(34.7721vw, 56.212vh) scale(0.3695);
  }
  to {
    transform: translate(36.8702vw, 100vh) scale(0.3695);
  }
}
.snow:nth-child(76) {
  opacity: 0.4446;
  transform: translate(82.5816vw, -10px) scale(0.2312);
  animation: fall-76 25s -23s linear infinite;
}
@keyframes fall-76 {
  63.834% {
    transform: translate(74.2694vw, 63.834vh) scale(0.2312);
  }
  to {
    transform: translate(78.4255vw, 100vh) scale(0.2312);
  }
}
.snow:nth-child(77) {
  opacity: 0.4738;
  transform: translate(69.7904vw, -10px) scale(0.8378);
  animation: fall-77 20s -9s linear infinite;
}
@keyframes fall-77 {
  42.501% {
    transform: translate(78.1659vw, 42.501vh) scale(0.8378);
  }
  to {
    transform: translate(73.97815vw, 100vh) scale(0.8378);
  }
}
.snow:nth-child(78) {
  opacity: 0.4748;
  transform: translate(35.9686vw, -10px) scale(0.212);
  animation: fall-78 16s -15s linear infinite;
}
@keyframes fall-78 {
  77.97% {
    transform: translate(40.5684vw, 77.97vh) scale(0.212);
  }
  to {
    transform: translate(38.2685vw, 100vh) scale(0.212);
  }
}
.snow:nth-child(79) {
  opacity: 0.8359;
  transform: translate(25.8172vw, -10px) scale(0.6388);
  animation: fall-79 11s -22s linear infinite;
}
@keyframes fall-79 {
  78.911% {
    transform: translate(21.6271vw, 78.911vh) scale(0.6388);
  }
  to {
    transform: translate(23.72215vw, 100vh) scale(0.6388);
  }
}
.snow:nth-child(80) {
  opacity: 0.0758;
  transform: translate(50.1078vw, -10px) scale(0.9689);
  animation: fall-80 20s -10s linear infinite;
}
@keyframes fall-80 {
  52.16% {
    transform: translate(43.5482vw, 52.16vh) scale(0.9689);
  }
  to {
    transform: translate(46.828vw, 100vh) scale(0.9689);
  }
}
.snow:nth-child(81) {
  opacity: 0.0505;
  transform: translate(1.3544vw, -10px) scale(0.9116);
  animation: fall-81 17s -14s linear infinite;
}
@keyframes fall-81 {
  76.249% {
    transform: translate(10.1707vw, 76.249vh) scale(0.9116);
  }
  to {
    transform: translate(5.76255vw, 100vh) scale(0.9116);
  }
}
.snow:nth-child(82) {
  opacity: 0.231;
  transform: translate(98.2606vw, -10px) scale(0.9052);
  animation: fall-82 20s -18s linear infinite;
}
@keyframes fall-82 {
  36.746% {
    transform: translate(96.1325vw, 36.746vh) scale(0.9052);
  }
  to {
    transform: translate(97.19655vw, 100vh) scale(0.9052);
  }
}
.snow:nth-child(83) {
  opacity: 0.6825;
  transform: translate(25.241vw, -10px) scale(0.3889);
  animation: fall-83 12s -12s linear infinite;
}
@keyframes fall-83 {
  58.162% {
    transform: translate(34.2147vw, 58.162vh) scale(0.3889);
  }
  to {
    transform: translate(29.72785vw, 100vh) scale(0.3889);
  }
}
.snow:nth-child(84) {
  opacity: 0.4387;
  transform: translate(66.6601vw, -10px) scale(0.6662);
  animation: fall-84 12s -30s linear infinite;
}
@keyframes fall-84 {
  56.84% {
    transform: translate(65.8242vw, 56.84vh) scale(0.6662);
  }
  to {
    transform: translate(66.24215vw, 100vh) scale(0.6662);
  }
}
.snow:nth-child(85) {
  opacity: 0.8059;
  transform: translate(4.9406vw, -10px) scale(0.641);
  animation: fall-85 14s -19s linear infinite;
}
@keyframes fall-85 {
  38.536% {
    transform: translate(7.8047vw, 38.536vh) scale(0.641);
  }
  to {
    transform: translate(6.37265vw, 100vh) scale(0.641);
  }
}
.snow:nth-child(86) {
  opacity: 0.1607;
  transform: translate(30.0845vw, -10px) scale(0.4156);
  animation: fall-86 12s -16s linear infinite;
}
@keyframes fall-86 {
  47.966% {
    transform: translate(39.924vw, 47.966vh) scale(0.4156);
  }
  to {
    transform: translate(35.00425vw, 100vh) scale(0.4156);
  }
}
.snow:nth-child(87) {
  opacity: 0.5681;
  transform: translate(13.5924vw, -10px) scale(0.3873);
  animation: fall-87 14s -6s linear infinite;
}
@keyframes fall-87 {
  49.246% {
    transform: translate(16.2616vw, 49.246vh) scale(0.3873);
  }
  to {
    transform: translate(14.927vw, 100vh) scale(0.3873);
  }
}
.snow:nth-child(88) {
  opacity: 0.2794;
  transform: translate(0.3324vw, -10px) scale(0.2174);
  animation: fall-88 11s -13s linear infinite;
}
@keyframes fall-88 {
  65.975% {
    transform: translate(7.4894vw, 65.975vh) scale(0.2174);
  }
  to {
    transform: translate(3.9109vw, 100vh) scale(0.2174);
  }
}
.snow:nth-child(89) {
  opacity: 0.395;
  transform: translate(39.7396vw, -10px) scale(0.9766);
  animation: fall-89 29s -8s linear infinite;
}
@keyframes fall-89 {
  63.587% {
    transform: translate(43.1432vw, 63.587vh) scale(0.9766);
  }
  to {
    transform: translate(41.4414vw, 100vh) scale(0.9766);
  }
}
.snow:nth-child(90) {
  opacity: 0.1464;
  transform: translate(0.9958vw, -10px) scale(0.7876);
  animation: fall-90 20s -9s linear infinite;
}
@keyframes fall-90 {
  46.751% {
    transform: translate(2.3577vw, 46.751vh) scale(0.7876);
  }
  to {
    transform: translate(1.67675vw, 100vh) scale(0.7876);
  }
}
.snow:nth-child(91) {
  opacity: 0.2671;
  transform: translate(16.2219vw, -10px) scale(0.0902);
  animation: fall-91 13s -7s linear infinite;
}
@keyframes fall-91 {
  79.42% {
    transform: translate(18.5729vw, 79.42vh) scale(0.0902);
  }
  to {
    transform: translate(17.3974vw, 100vh) scale(0.0902);
  }
}
.snow:nth-child(92) {
  opacity: 0.8047;
  transform: translate(79.9973vw, -10px) scale(0.1278);
  animation: fall-92 15s -19s linear infinite;
}
@keyframes fall-92 {
  50.456% {
    transform: translate(73.0899vw, 50.456vh) scale(0.1278);
  }
  to {
    transform: translate(76.5436vw, 100vh) scale(0.1278);
  }
}
.snow:nth-child(93) {
  opacity: 0.0917;
  transform: translate(90.9407vw, -10px) scale(0.3155);
  animation: fall-93 20s -3s linear infinite;
}
@keyframes fall-93 {
  40.589% {
    transform: translate(96.6523vw, 40.589vh) scale(0.3155);
  }
  to {
    transform: translate(93.7965vw, 100vh) scale(0.3155);
  }
}
.snow:nth-child(94) {
  opacity: 0.1036;
  transform: translate(55.7419vw, -10px) scale(0.7019);
  animation: fall-94 26s -29s linear infinite;
}
@keyframes fall-94 {
  31.386% {
    transform: translate(54.5718vw, 31.386vh) scale(0.7019);
  }
  to {
    transform: translate(55.15685vw, 100vh) scale(0.7019);
  }
}
.snow:nth-child(95) {
  opacity: 0.042;
  transform: translate(52.7205vw, -10px) scale(0.7804);
  animation: fall-95 13s -12s linear infinite;
}
@keyframes fall-95 {
  61.801% {
    transform: translate(51.2779vw, 61.801vh) scale(0.7804);
  }
  to {
    transform: translate(51.9992vw, 100vh) scale(0.7804);
  }
}
.snow:nth-child(96) {
  opacity: 0.7425;
  transform: translate(88.8109vw, -10px) scale(0.6001);
  animation: fall-96 19s -13s linear infinite;
}
@keyframes fall-96 {
  52.953% {
    transform: translate(90.0856vw, 52.953vh) scale(0.6001);
  }
  to {
    transform: translate(89.44825vw, 100vh) scale(0.6001);
  }
}
.snow:nth-child(97) {
  opacity: 0.986;
  transform: translate(74.9334vw, -10px) scale(0.8593);
  animation: fall-97 23s -14s linear infinite;
}
@keyframes fall-97 {
  49.162% {
    transform: translate(68.3921vw, 49.162vh) scale(0.8593);
  }
  to {
    transform: translate(71.66275vw, 100vh) scale(0.8593);
  }
}
.snow:nth-child(98) {
  opacity: 0.436;
  transform: translate(90.1944vw, -10px) scale(0.138);
  animation: fall-98 11s -25s linear infinite;
}
@keyframes fall-98 {
  68.767% {
    transform: translate(88.727vw, 68.767vh) scale(0.138);
  }
  to {
    transform: translate(89.4607vw, 100vh) scale(0.138);
  }
}
.snow:nth-child(99) {
  opacity: 0.7875;
  transform: translate(84.3973vw, -10px) scale(0.9753);
  animation: fall-99 15s -16s linear infinite;
}
@keyframes fall-99 {
  39.733% {
    transform: translate(90.9126vw, 39.733vh) scale(0.9753);
  }
  to {
    transform: translate(87.65495vw, 100vh) scale(0.9753);
  }
}
.snow:nth-child(100) {
  opacity: 0.3199;
  transform: translate(99.7795vw, -10px) scale(0.9743);
  animation: fall-100 14s -18s linear infinite;
}
@keyframes fall-100 {
  61.681% {
    transform: translate(94.5728vw, 61.681vh) scale(0.9743);
  }
  to {
    transform: translate(97.17615vw, 100vh) scale(0.9743);
  }
}
.snow:nth-child(101) {
  opacity: 0.31;
  transform: translate(46.2914vw, -10px) scale(0.0352);
  animation: fall-101 14s -11s linear infinite;
}
@keyframes fall-101 {
  57.412% {
    transform: translate(46.629vw, 57.412vh) scale(0.0352);
  }
  to {
    transform: translate(46.4602vw, 100vh) scale(0.0352);
  }
}
.snow:nth-child(102) {
  opacity: 0.9545;
  transform: translate(30.9206vw, -10px) scale(0.6254);
  animation: fall-102 20s -8s linear infinite;
}
@keyframes fall-102 {
  66.171% {
    transform: translate(22.9546vw, 66.171vh) scale(0.6254);
  }
  to {
    transform: translate(26.9376vw, 100vh) scale(0.6254);
  }
}
.snow:nth-child(103) {
  opacity: 0.8148;
  transform: translate(84.449vw, -10px) scale(0.3552);
  animation: fall-103 11s -23s linear infinite;
}
@keyframes fall-103 {
  61.252% {
    transform: translate(85.3052vw, 61.252vh) scale(0.3552);
  }
  to {
    transform: translate(84.8771vw, 100vh) scale(0.3552);
  }
}
.snow:nth-child(104) {
  opacity: 0.1783;
  transform: translate(71.999vw, -10px) scale(0.0355);
  animation: fall-104 16s -30s linear infinite;
}
@keyframes fall-104 {
  33.434% {
    transform: translate(75.159vw, 33.434vh) scale(0.0355);
  }
  to {
    transform: translate(73.579vw, 100vh) scale(0.0355);
  }
}
.snow:nth-child(105) {
  opacity: 0.2384;
  transform: translate(38.6827vw, -10px) scale(0.6751);
  animation: fall-105 20s -29s linear infinite;
}
@keyframes fall-105 {
  53.875% {
    transform: translate(32.9919vw, 53.875vh) scale(0.6751);
  }
  to {
    transform: translate(35.8373vw, 100vh) scale(0.6751);
  }
}
.snow:nth-child(106) {
  opacity: 0.3878;
  transform: translate(59.156vw, -10px) scale(0.0907);
  animation: fall-106 23s -14s linear infinite;
}
@keyframes fall-106 {
  63.134% {
    transform: translate(51.2697vw, 63.134vh) scale(0.0907);
  }
  to {
    transform: translate(55.21285vw, 100vh) scale(0.0907);
  }
}
.snow:nth-child(107) {
  opacity: 0.5919;
  transform: translate(81.0091vw, -10px) scale(0.3866);
  animation: fall-107 16s -17s linear infinite;
}
@keyframes fall-107 {
  52.945% {
    transform: translate(82.6099vw, 52.945vh) scale(0.3866);
  }
  to {
    transform: translate(81.8095vw, 100vh) scale(0.3866);
  }
}
.snow:nth-child(108) {
  opacity: 0.0586;
  transform: translate(98.9365vw, -10px) scale(0.6915);
  animation: fall-108 23s -17s linear infinite;
}
@keyframes fall-108 {
  42.309% {
    transform: translate(101.2836vw, 42.309vh) scale(0.6915);
  }
  to {
    transform: translate(100.11005vw, 100vh) scale(0.6915);
  }
}
.snow:nth-child(109) {
  opacity: 0.1192;
  transform: translate(17.3446vw, -10px) scale(0.8194);
  animation: fall-109 14s -3s linear infinite;
}
@keyframes fall-109 {
  49.132% {
    transform: translate(22.7397vw, 49.132vh) scale(0.8194);
  }
  to {
    transform: translate(20.04215vw, 100vh) scale(0.8194);
  }
}
.snow:nth-child(110) {
  opacity: 0.5671;
  transform: translate(87.6253vw, -10px) scale(0.5577);
  animation: fall-110 28s -20s linear infinite;
}
@keyframes fall-110 {
  30.888% {
    transform: translate(82.6918vw, 30.888vh) scale(0.5577);
  }
  to {
    transform: translate(85.15855vw, 100vh) scale(0.5577);
  }
}
.snow:nth-child(111) {
  opacity: 0.6208;
  transform: translate(47.9536vw, -10px) scale(0.8989);
  animation: fall-111 13s -8s linear infinite;
}
@keyframes fall-111 {
  36.604% {
    transform: translate(45.5984vw, 36.604vh) scale(0.8989);
  }
  to {
    transform: translate(46.776vw, 100vh) scale(0.8989);
  }
}
.snow:nth-child(112) {
  opacity: 0.8273;
  transform: translate(43.4948vw, -10px) scale(0.7851);
  animation: fall-112 23s -27s linear infinite;
}
@keyframes fall-112 {
  66.044% {
    transform: translate(51.8305vw, 66.044vh) scale(0.7851);
  }
  to {
    transform: translate(47.66265vw, 100vh) scale(0.7851);
  }
}
.snow:nth-child(113) {
  opacity: 0.5227;
  transform: translate(61.9663vw, -10px) scale(0.8732);
  animation: fall-113 29s -26s linear infinite;
}
@keyframes fall-113 {
  79.514% {
    transform: translate(52.2276vw, 79.514vh) scale(0.8732);
  }
  to {
    transform: translate(57.09695vw, 100vh) scale(0.8732);
  }
}
.snow:nth-child(114) {
  opacity: 0.1595;
  transform: translate(77.8709vw, -10px) scale(0.0491);
  animation: fall-114 20s -2s linear infinite;
}
@keyframes fall-114 {
  77.848% {
    transform: translate(79.9521vw, 77.848vh) scale(0.0491);
  }
  to {
    transform: translate(78.9115vw, 100vh) scale(0.0491);
  }
}
.snow:nth-child(115) {
  opacity: 0.2636;
  transform: translate(51.7465vw, -10px) scale(0.2161);
  animation: fall-115 27s -17s linear infinite;
}
@keyframes fall-115 {
  75.609% {
    transform: translate(44.4257vw, 75.609vh) scale(0.2161);
  }
.........完整代码请登录后点击上方下载按钮下载查看