Yalnızca CSS ile kar yağışı efekti

Son zamanlarda Teksas’da bile kar yağıyor, bu haftanın başıyla Marmara’da da güzel kar yağdı değerlendirmelere göre bugünden sonra artık yağmayacak. Bu yazımda HTML ve CSS ile(JavaScript olmadan) web sayfasına kar yağdırma efekti yapayı göstereceğim.

Canlı: https://codepen.io/wolkanca/details/LYbLQrd

Öncelikle sayfanın arka planını ayarlıyoruz:

html, body{
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(#123, #111);
}

HTML içerisine kar tanelerini ekliyoruz:

<div class="kartanesi"></div>
...
...
...
<div class="kartanesi"></div>
<div class="kartanesi"></div> <!-- 50 tane! -->

CSS ile kar tanelerine şekil veriyoruz:

.kartanesi{
  --size: 1vw;
  width: var(--size);
  height: var(--size);
  background: white;
  border-radius: 50%;
  position: absolute;
  top: -5vh;
}

CSS animasyonunu ayarlıyoruz:

@keyframes karyagisi{
  0%{
    transform: translate3d(0, 0, 0);
 }
  100%{
    transform: translate3d(0, 110vh, 0);
 }
}

CSS animasyonu uyguluyoruz:

.kartanesi:nth-child(1){
  --size: 0.6vw;
  left: 55vw;
  animation: karyagisi 8s linear infinite;
}


.kartanesi:nth-child(49){
  --size: 1vw;
  left: 78vw;
  animation: karyagisi 7s linear infinite;
}

.kartanesi:nth-child(50){
  --size: 1.5vw;
  left: 20vw;
  animation: karyagisi 10s linear infinite;
}

CSS için SCSS kullanılırsa random özelliği işe yarar:

@keyframes karyagisi{
  0%{
    transform: translate3d(var(--left-ini), 0, 0);
 }
  100%{
    transform: translate3d(var(--left-end), 110vh, 0);
 }
}

@for $i from 1 through 50{
  .kartanesi:nth-child(#{$i}){
    --size: #{random(5) * 0.2}vw;
    --left-ini: #{random(20) - 10}vw; /* random initial */
    --left-end: #{random(20) - 10}vw; /* random final */
    left: #{random(100)}vw;
    animation: karyagisi #{5 + random(10)}s linear infinite;
    animation-delay: -#{random(10)}s;
 }
}

Sonuç:

Kolay gelsin.