aasasasa
/* --- KAR EFEKTİ CSS AYARLARI --- */
/* Karı kapsayan ana kutu (Ekrana sabitlenir ve tıklamaları engellemez) */
.snow-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* Tıklamalar arkaya geçer */
z-index: 999999; /* En üstte durur */
overflow: hidden;
}
/* Kar tanesi (Ortak özellikler) */
.snowflake {
position: absolute;
top: -10px;
color: white; /* Kar rengi */
font-size: 1em;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000; /* Beyaz zeminde görünsün diye hafif gölge */
animation-name: fall-sway;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* --- ANİMASYON (Düşme ve Sallanma) --- */
@keyframes fall-sway {
0% {
top: -10%;
transform: translateX(0);
}
25% {
transform: translateX(15px);
}
50% {
transform: translateX(-15px);
}
75% {
transform: translateX(15px);
}
100% {
top: 110%;
transform: translateX(0);
}
}
/* --- KARI ÇOĞALTMA VE RASTGELELEŞTİRME --- */
/* Her kar tanesine farklı hız, boyut ve gecikme veriyoruz */
.snowflake:nth-child(1) { left: 5%; animation-duration: 8s; font-size: 15px; animation-delay: 0s; }
.snowflake:nth-child(2) { left: 15%; animation-duration: 12s; font-size: 20px; animation-delay: 2s; }
.snowflake:nth-child(3) { left: 25%; animation-duration: 10s; font-size: 12px; animation-delay: 4s; }
.snowflake:nth-child(4) { left: 35%; animation-duration: 14s; font-size: 22px; animation-delay: 1s; }
.snowflake:nth-child(5) { left: 45%; animation-duration: 9s; font-size: 18px; animation-delay: 3s; }
.snowflake:nth-child(6) { left: 55%; animation-duration: 11s; font-size: 14px; animation-delay: 5s; }
.snowflake:nth-child(7) { left: 65%; animation-duration: 13s; font-size: 25px; animation-delay: 2s; }
.snowflake:nth-child(8) { left: 75%; animation-duration: 7s; font-size: 16px; animation-delay: 6s; }
.snowflake:nth-child(9) { left: 85%; animation-duration: 15s; font-size: 19px; animation-delay: 0s; }
.snowflake:nth-child(10){ left: 95%; animation-duration: 10s; font-size: 21px; animation-delay: 4s; }
/* Ekstra yoğunluk için ikinci grup */
.snowflake:nth-child(11){ left: 10%; animation-duration: 9s; font-size: 13px; animation-delay: 1s; }
.snowflake:nth-child(12){ left: 30%; animation-duration: 13s; font-size: 24px; animation-delay: 3s; }
.snowflake:nth-child(13){ left: 60%; animation-duration: 8s; font-size: 17px; animation-delay: 5s; }
.snowflake:nth-child(14){ left: 80%; animation-duration: 11s; font-size: 15px; animation-delay: 2s; }
.snowflake:nth-child(15){ left: 50%; animation-duration: 14s; font-size: 20px; animation-delay: 4s; }
❄
❄
●
❄
❄
●
❄
❄
●
❄
❄
❄
●
❄
❄
