Конфеты на Хеллоуин для сайта на CSS

Конфеты на Хеллоуин для сайта на CSS. Данным украшением можно оформить сайт или тематический блог на Хеллоуин. Конфеты сыпятся сверху вниз в виде дождя. Сниппет сделан с использованием HTML и CSS. Данный сниппет чем то похож на скрипт снега. Хотя по сути и тот и другой можно использовать для оформления сайта, заменив на нужные картинки.

HTML

<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="candy"></div>
<div class="candy candy2"></div>
<div class="candy candy3"></div>
<div class="candy candy4"></div>
<div class="candy candy5"></div>
<div class="candy candy6"></div>
<div class="candy candy7"></div>
<div class="candy candy8"></div>
<div class="candy candy9"></div>
<div class="candy candy10"></div>
<div class="halloween"></div>
<div class="halloween halloween2"></div>
<div class="halloween halloween3"></div>
<div class="halloween halloween4"></div>
<div class="halloween halloween5"></div>
<div class="halloween halloween6"></div>
<div class="halloween halloween7"></div>
<div class="halloween halloween8"></div>
<div class="halloween halloween9"></div>
<div class="halloween halloween10"></div>

CSS

body {
  height: 100vh;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  filter: drop-shadow(0 0 10px white);
}

.snow {
      background-image: url(https://photo.girlsmonday.com.tw/photo/girlsmonday/index/images/otherP/p2.png);
    background-size: 100%;
  position: absolute;
  width: 80px;
  height: 80px;
}


.snow:nth-child(1) {
  opacity: 0.117;
  transform: translate(58.7576vw, -10px) scale(0.4413);
  animation: fall-1 23s -21s linear infinite;
}
@keyframes fall-1 {
  46.508% {
    transform: translate(54.7505vw, 46.508vh) scale(0.4413);
  }
  to {
    transform: translate(56.75405vw, 100vh) scale(0.4413);
  }
}
.snow:nth-child(2) {
  opacity: 0.4597;
  transform: translate(88.7451vw, -10px) scale(0.7679);
  animation: fall-2 20s -17s linear infinite;
}
@keyframes fall-2 {
  61.406% {
    transform: translate(80.0815vw, 61.406vh) scale(0.7679);
  }
  to {
    transform: translate(84.4133vw, 100vh) scale(0.7679);
  }
}
.snow:nth-child(3) {
  opacity: 0.22;
  transform: translate(26.8699vw, -10px) scale(0.0021);
  animation: fall-3 14s -5s linear infinite;
}
@keyframes fall-3 {
  73.817% {
    transform: translate(29.6303vw, 73.817vh) scale(0.0021);
  }
  to {
    transform: translate(28.2501vw, 100vh) scale(0.0021);
  }
}
.snow:nth-child(4) {
  opacity: 0.5039;
  transform: translate(78.1667vw, -10px) scale(0.2137);
  animation: fall-4 13s -7s linear infinite;
}
@keyframes fall-4 {
  30.216% {
    transform: translate(85.2503vw, 30.216vh) scale(0.2137);
  }
  to {
    transform: translate(81.7085vw, 100vh) scale(0.2137);
  }
}
.snow:nth-child(5) {
  opacity: 0.8499;
  transform: translate(5.6504vw, -10px) scale(0.0489);
  animation: fall-5 14s -3s linear infinite;
}
@keyframes fall-5 {
  63.221% {
    transform: translate(8.316vw, 63.221vh) scale(0.0489);
  }
  to {
    transform: translate(6.9832vw, 100vh) scale(0.0489);
  }
}
.snow:nth-child(6) {
  opacity: 0.8736;
  transform: translate(55.317vw, -10px) scale(0.8769);
  animation: fall-6 30s -26s linear infinite;
}
@keyframes fall-6 {
  47.456% {
    transform: translate(56.4106vw, 47.456vh) scale(0.8769);
  }
  to {
    transform: translate(55.8638vw, 100vh) scale(0.8769);
  }
}
.snow:nth-child(7) {
  opacity: 0.8965;
  transform: translate(80.3827vw, -10px) scale(0.7281);
  animation: fall-7 19s -29s linear infinite;
}
@keyframes fall-7 {
  61.105% {
    transform: translate(80.5627vw, 61.105vh) scale(0.7281);
  }
  to {
    transform: translate(80.4727vw, 100vh) scale(0.7281);
  }
}
.snow:nth-child(8) {
  opacity: 0.4204;
  transform: translate(71.3842vw, -10px) scale(0.5214);
  animation: fall-8 25s -11s linear infinite;
}
@keyframes fall-8 {
  78.911% {
    transform: translate(73.7858vw, 78.911vh) scale(0.5214);
  }
  to {
    transform: translate(72.585vw, 100vh) scale(0.5214);
  }
}
.snow:nth-child(9) {
  opacity: 0.4603;
  transform: translate(33.7933vw, -10px) scale(0.3888);
  animation: fall-9 14s -29s linear infinite;
}
@keyframes fall-9 {
  66.272% {
    transform: translate(43.5146vw, 66.272vh) scale(0.3888);
  }
  to {
    transform: translate(38.65395vw, 100vh) scale(0.3888);
  }
}
.snow:nth-child(10) {
  opacity: 0.1117;
  transform: translate(12.2629vw, -10px) scale(0.4177);
  animation: fall-10 27s -28s linear infinite;
}
@keyframes fall-10 {
  68.46% {
    transform: translate(15.9671vw, 68.46vh) scale(0.4177);
  }
  to {
    transform: translate(14.115vw, 100vh) scale(0.4177);
  }
}
.candy {
      background-image: url(https://photo.girlsmonday.com.tw/photo/girlsmonday/index/images/otherP/p4.png);
    background-size: 100%;
  position: absolute;
  width: 80px;
  height: 40px;
}
.candy {
  opacity: 0.5844;
  transform: translate(96.9076vw, -10px) scale(0.8203);
  animation: fall-11-1 22s -29s linear infinite;
}
@keyframes fall-11-1 {
  66.9% {
    transform: translate(104.1965vw, 66.9vh) scale(0.8203);
  }
  to {
    transform: translate(100.55205vw, 100vh) scale(0.8203);
  }
}
.candy2 {
  opacity: 0.4689;
  transform: translate(1.3332vw, -10px) scale(0.0123);
  animation: fall-12 20s -19s linear infinite;
}
@keyframes fall-12 {
  73.871% {
    transform: translate(7.4806vw, 73.871vh) scale(0.0123);
  }
  to {
    transform: translate(4.4069vw, 100vh) scale(0.0123);
  }
}
.candy3 {
  opacity: 0.4163;
  transform: translate(39.4635vw, -10px) scale(0.3085);
  animation: fall-13 17s -24s linear infinite;
}
@keyframes fall-13 {
  59.312% {
    transform: translate(47.1265vw, 59.312vh) scale(0.3085);
  }
  to {
    transform: translate(43.295vw, 100vh) scale(0.3085);
  }
}
.candy4 {
  opacity: 0.9949;
  transform: translate(6.3944vw, -10px) scale(0.825);
  animation: fall-14 25s -25s linear infinite;
}
@keyframes fall-14 {
  69.691% {
    transform: translate(0.5149vw, 69.691vh) scale(0.825);
  }
  to {
    transform: translate(3.45465vw, 100vh) scale(0.825);
  }
}
.candy5 {
  opacity: 0.0317;
  transform: translate(2.6973vw, -10px) scale(0.3009);
  animation: fall-15 27s -26s linear infinite;
}
@keyframes fall-15 {
  55.24% {
    transform: translate(-5.1853vw, 55.24vh) scale(0.3009);
  }
  to {
    transform: translate(-1.244vw, 100vh) scale(0.3009);
  }
}
.candy6 {
  opacity: 0.7958;
  transform: translate(40.8577vw, -10px) scale(0.9837);
  animation: fall-16 28s -25s linear infinite;
}
@keyframes fall-16 {
  50.276% {
    transform: translate(44.4569vw, 50.276vh) scale(0.9837);
  }
  to {
    transform: translate(42.6573vw, 100vh) scale(0.9837);
  }
}
.candy7 {
  opacity: 0.051;
  transform: translate(58.9779vw, -10px) scale(0.9603);
  animation: fall-17 30s -19s linear infinite;
}
@keyframes fall-17 {
  50.115% {
    transform: translate(64.0726vw, 50.115vh) scale(0.9603);
  }
  to {
    transform: translate(61.52525vw, 100vh) scale(0.9603);
  }
}
.candy8 {
  opacity: 0.9806;
  transform: translate(90.8223vw, -10px) scale(0.0849);
  animation: fall-18 11s -12s linear infinite;
}
@keyframes fall-18 {
  58.386% {
    transform: translate(99.8402vw, 58.386vh) scale(0.0849);
  }
  to {
    transform: translate(95.33125vw, 100vh) scale(0.0849);
  }
}
.candy9 {
  opacity: 0.9045;
  transform: translate(5.3476vw, -10px) scale(0.0388);
  animation: fall-19 29s -3s linear infinite;
}
@keyframes fall-19 {
  32.215% {
    transform: translate(7.7956vw, 32.215vh) scale(0.0388);
  }
  to {
    transform: translate(6.5716vw, 100vh) scale(0.0388);
  }
}
.candy10 {
  opacity: 0.5836;
  transform: translate(64.3389vw, -10px) scale(0.3376);
  animation: fall-20 22s -18s linear infinite;
}
@keyframes fall-20 {
  38.362% {
    transform: translate(66.8724vw, 38.362vh) scale(0.3376);
  }
  to {
    transform: translate(65.60565vw, 100vh) scale(0.3376);
  }
}

.halloween {
      background-image: url(https://photo.girlsmonday.com.tw/photo/girlsmonday/index/images/otherP/p6.png);
    background-size: 100%;
  position: absolute;
  width: 80px;
  height: 40px;
}

.halloween {
  opacity: 0.3813;
  transform: translate(70.3337vw, -10px) scale(0.3945);
  animation: fall-21 30s -11s linear infinite;
}
@keyframes fall-21 {
  49.358% {
    transform: translate(66.7246vw, 49.358vh) scale(0.3945);
  }
  to {
    transform: translate(68.52915vw, 100vh) scale(0.3945);
  }
}
.halloween2 {
  opacity: 0.1314;
  transform: translate(35.8652vw, -10px) scale(0.5556);
  animation: fall-22 15s -1s linear infinite;
}
@keyframes fall-22 {
  67.619% {
    transform: translate(31.2091vw, 67.619vh) scale(0.5556);
  }
  to {
    transform: translate(33.53715vw, 100vh) scale(0.5556);
  }
}
.halloween3 {
  opacity: 0.0001;
  transform: translate(56.304vw, -10px) scale(0.7605);
  animation: fall-23 24s -5s linear infinite;
}
@keyframes fall-23 {
  33.581% {
    transform: translate(51.4288vw, 33.581vh) scale(0.7605);
  }
  to {
    transform: translate(53.8664vw, 100vh) scale(0.7605);
  }
}
.halloween4 {
  opacity: 0.7495;
  transform: translate(17.66vw, -10px) scale(0.9004);
  animation: fall-24 23s -19s linear infinite;
}
@keyframes fall-24 {
  55.263% {
    transform: translate(12.5335vw, 55.263vh) scale(0.9004);
  }
  to {
    transform: translate(15.09675vw, 100vh) scale(0.9004);
  }
}
.halloween5 {
  opacity: 0.1863;
  transform: translate(5.442vw, -10px) scale(0.149);
  animation: fall-25 14s -11s linear infinite;
}
@keyframes fall-25 {
  45.581% {
    transform: translate(5.1878vw, 45.581vh) scale(0.149);
  }
  to {
    transform: translate(5.3149vw, 100vh) scale(0.149);
  }
}
.halloween6 {
  opacity: 0.5416;
  transform: translate(38.908vw, -10px) scale(0.6792);
  animation: fall-26 27s -20s linear infinite;
}
@keyframes fall-26 {
  53.039% {
    transform: translate(43.805vw, 53.039vh) scale(0.6792);
  }
  to {
    transform: translate(41.3565vw, 100vh) scale(0.6792);
  }
}
.halloween7 {
  opacity: 0.2062;
  transform: translate(80.2528vw, -10px) scale(0.8553);
  animation: fall-27 27s -24s linear infinite;
}
@keyframes fall-27 {
  54.506% {
    transform: translate(75.3164vw, 54.506vh) scale(0.8553);
  }
  to {
    transform: translate(77.7846vw, 100vh) scale(0.8553);
  }
}
.halloween8 {
  opacity: 0.5861;
  transform: translate(49.0145vw, -10px) scale(0.8356);
  animation: fall-28 20s -22s linear infinite;
}
@keyframes fall-28 {
  33.917% {
    transform: translate(46.69vw, 33.917vh) scale(0.8356);
  }
  to {
    transform: translate(47.85225vw, 100vh) scale(0.8356);
  }
}
.halloween9 {
  opacity: 0.5893;
  transform: translate(43.6071vw, -10px) scale(0.1956);
  animation: fall-29 26s -4s linear infinite;
}
@keyframes fall-29 {
  78.164% {
    transform: translate(33.952vw, 78.164vh) scale(0.1956);
  }
  to {
    transform: translate(38.77955vw, 100vh) scale(0.1956);
  }
}
.halloween10 {
  opacity: 0.4531;
  transform: translate(36.1307vw, -10px) scale(0.3122);
  animation: fall-30 15s -13s linear infinite;
}
@keyframes fall-30 {
  76.699% {
    transform: translate(39.1898vw, 76.699vh) scale(0.3122);
  }
  to {
    transform: translate(37.66025vw, 100vh) scale(0.3122);
  }
}