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;
}
@key.........完整代码请登录后点击上方下载按钮下载查看