Lichtveeg over tekst

Een smalle lichtstreep trekt in een lus over gedempte tekst; geschikt voor een badge of aankondiging die net wat aandacht vraagt.

Nieuw: onderhoudsplan voor 2027 staat open

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Geen JavaScript nodig.

<!-- Lichtveeg over tekst · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-shn"><span class="ei-shn__dot"></span><span class="ei-shn__t">Nieuw: onderhoudsplan voor 2027 staat open</span></div>
</div>

/* Lichtveeg over tekst · NedDev · eigen werk. */
.ei-shn{display:inline-flex;align-items:center;gap:10px;background:#0a0a0a;border-radius:999px;padding:11px 18px;max-width:88%;box-sizing:border-box}
.ei-shn__dot{width:7px;height:7px;border-radius:50%;background:#F5480F;flex:none}
.ei-shn__t{font-family:'Switzer',sans-serif;font-weight:500;font-size:14px;color:transparent;background:linear-gradient(100deg,#8a8a8a 0%,#8a8a8a 40%,#fff 50%,#8a8a8a 60%,#8a8a8a 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;animation:ei-shn-sweep 3.2s cubic-bezier(.5,0,.3,1) infinite}
@keyframes ei-shn-sweep{0%{background-position:100% 0}70%,100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.ei-shn__t{animation:none;color:#d6d6d6;background:none}}

Meer uit tekstanimaties

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →