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