Canlı Önizleme
Uzay Teması
Nasıl Kullanılır?
Birden fazla kayan yıldız oluşturmak isterseniz .star-fall divlerini çoğaltıp 'animation-delay' değeriyle rastgele zamanlayabilirsiniz.
Kaynak Kodlar
HTML
<div class="stars-wrapper">
<div class="star-fall"></div>
<div class="star-text">Uzay Teması</div>
</div>CSS
.stars-wrapper { position: relative; width: 300px; height: 200px; background: #0b0c10; overflow: hidden; border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 20px rgba(108,92,231,0.2); }
.star-text { color: #fff; font-family: 'Inter', sans-serif; font-size: 24px; font-weight: bold; z-index: 2; text-shadow: 0 0 10px rgba(255,255,255,0.5); }
.star-fall { position: absolute; width: 2px; height: 50px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); top: -50px; left: 50%; animation: fall 3s linear infinite; opacity: 0; transform: rotate(-45deg); box-shadow: 0 0 10px #fff; }
@keyframes fall { 0% { top: -50px; opacity: 1; left: 80%; } 100% { top: 300px; opacity: 0; left: 10%; } }