Canlı Önizleme
Sistem Aktif
Nasıl Kullanılır?
Canlı destek baloncukları veya çevrimiçi kullanıcılar için çok estetik duran hafif bir bildirgedir.
Kaynak Kodlar
HTML
<div class="pulse-box">
<div class="pulse-dot"></div>
<span>Sistem Aktif</span>
</div>CSS
.pulse-box { display: flex; align-items: center; gap: 15px; background: #2a2a35; padding: 15px 25px; border-radius: 30px; font-family: 'Inter', sans-serif; color: #fff; }
.pulse-dot { width: 20px; height: 20px; background: #4cd137; border-radius: 50%; box-shadow: 0 0 0 0 rgba(76, 209, 55, 0.7); animation: pulse-anim 2s infinite; cursor: pointer; }
@keyframes pulse-anim {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 209, 55, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(76, 209, 55, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 209, 55, 0); }
}