Buradasın
CSS ile kar efekti nasıl yapılır?
Yazeka
Arama sonuçlarına göre oluşturuldu
CSS ile kar efekti oluşturmak için aşağıdaki adımlar izlenebilir:
- Sayfa arka planının ayarlanması 3.
padding: 0; margin: 0; width: 100vw; height: 100vh; position: relative; overflow: hidden; background: linear-gradient(#123, #111); } - Kar tanelerinin eklenmesi 3.
<div class="kartanesi"></div> ... ... <div class="kartanesi"></div> <div class="kartanesi"></div> <!-- 50 tane! --> - Kar tanelerine şekil verilmesi 3.
.kartanesi{ --size: 1vw; width: var(--size); height: var(--size); background: white; border-radius: 50%; position: absolute; top: -5vh; } - CSS animasyonunun ayarlanması 3.
@keyframes karyagisi{ 0%{ transform: translate3d(0, 0, 0); } 100%{ transform: translate3d(0, 110vh, 0); } } - Animasyonun uygulanması 3.
.kartanesi:nth-child(1){ --size: 0.6vw; left: 55vw; animation: karyagisi 8s linear infinite; } ...
Ayrıca, furkangiray.com sitesinde JavaScript ve sade CSS kullanarak kar yağışı efekti oluşturma hakkında bir yazı bulunmaktadır 4.
5 kaynaktan alınan bilgiyle göre: