Gyolyó LED fény hatás animáció

YnM Tech Guru
1

Index.php

<header class="navbar">
    <div class="navbar-brand">
        <span class="led-effect">YnM Self Hosting</span>
    </div>
</header>

ynm.css


.navbar {
    display: flex;
    justify-content: center; /* Középre igazítás */
    align-items: center;
    background-color: #333;
    padding: 10px 0;
    color: white;
}

.navbar-brand {
    font-size: 2em;
    font-weight: bold;
    position: relative;
    display: inline-block;
    color: white;  /* Szöveg színe */
    padding-bottom: 5px; /* A szöveg alatt helyet adunk a golyónak */
}

/* LED fény hatás animáció */
.led-effect {
    position: relative;
    display: inline-block;
}

.led-effect::after {
    content: '';
    position: absolute;
    top: 100%; /* Szöveg alatt helyezkedik el */
    left: 0;
    width: 0.1px; /* Kisebb golyó */
    height: 0.1px; /* Kisebb golyó */
    border-radius: 100%; /* Kerek alak */
    box-shadow: 0 0 8px 5px rgba(0, 255, 255, 1) !important;
    animation: moveLED 15s ease-in-out infinite;
}
/* Animáció: fényes golyó végigfut a szövegen */
@keyframes moveLED {
    0% {
        left: 0;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 0;
    }
}

Teszt → YnM