<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kar Yağışı Efekti</title>
<style>
/* Kar tanesi efekti için gerekli stil */
body {
margin: 0;
overflow: hidden;
background: #0c1b33;
color: white;
font-family: Arial, sans-serif;
}
.snowflake {
position: fixed;
top: -10px;
font-size: 1em;
color: white;
animation: fall linear infinite;
}
/* Kar tanelerinin boyutlarını ayarla */
@keyframes fall {
0% { transform: translateY(-10px) rotate(0deg); }
100% { transform: translateY(100vh) rotate(360deg); }
}
</style>
</head>
<body>
<!-- Kar tanesi elemanları -->
<div class="snowflake">❄</div>
<div class="snowflake">❅</div>
<div class="snowflake">❆</div>
<div class="snowflake">❄</div>
<div class="snowflake">❅</div>
<div class="snowflake">❆</div>
<script>
// Kar tanesi oluşturma fonksiyonu
function createSnowflake() {
const snowflake = document.createElement("div");
snowflake.classList.add("snowflake");
snowflake.textContent = "❄";
// Kar tanesinin ekranda rastgele bir konuma düşmesini sağla
snowflake.style.left = Math.random() * window.innerWidth + "px";
snowflake.style.animationDuration = (Math.random() * 3 + 2) + "s"; // 2-5 saniye arasında düşme süresi
snowflake.style.fontSize = (Math.random() * 10 + 10) + "px"; // 10-20px arasında boyut
document.body.appendChild(snowflake);
// Kar tanesi düştükten sonra sil
snowflake.addEventListener("animationend", () => {
snowflake.remove();
});
}
// Belirli aralıklarla kar tanesi oluştur
setInterval(createSnowflake, 100);
</script>
</body>
</html>