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