Aşağıdaki CSS kodunu <head> etiketleri arasına ekleyerek web sitenizde kar yağışı efekti oluşturabilirsiniz.
Özellikle kampanya dönemleri, yılbaşı teması veya sezonluk landing page’ler için oldukça keyifli bir dokunuş 👌
👉 Shopify, WordPress veya özel yazılım fark etmez — CSS destekleyen her yapıda çalışır.
<style>
body {
position: relative;
background:#d2d2d2;
}
body:after {
content: '';
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image:
url('https://lnkd.in/dWTFQp5q'),
url('https://lnkd.in/djc2ZKKs'),
url('https://lnkd.in/djc2ZKKs');
animation: snow 10s linear infinite;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
</style>🎯 İpucu: Mobilde performans için animasyon süresini artırabilirsiniz
Sadece ana sayfada çalıştırmak için body yerine özel bir wrapper sınıfı kullanabilirsiniz
Küçük dokunuşlar, büyük kullanıcı deneyimi farkları yaratır ✨