Eine interaktive Karte, die dem Mauszeiger mit einem weichen Lichtkegel folgt und so ein lebendiges Spotlight-Erlebnis auf dunklem Grund erzeugt.
1<div class="el-spot" onmousemove="this.style.setProperty('--mx',event.offsetX+'px');this.style.setProperty('--my',event.offsetY+'px')">2 <div class="el-spot__light"></div>3 <div class="el-spot__content">4 <div class="el-spot__icon">✦</div>5 <h3 class="el-spot__title">Spotlight</h3>6 <p class="el-spot__text">Bewege die Maus über die Karte und folge dem Licht.</p>7 </div>8</div>Keine Installation, kein Build-Step — reine Standards, sofort einsatzbereit.
Klicke oben auf „Code kopieren“ — HTML und CSS landen in deiner Zwischenablage.
Füge das Markup an der gewünschten Stelle deiner Seite oder Komponente ein.
Übernimm den <style>-Block bzw. die Klassen in deine Stylesheet-Datei.
Aus derselben Kategorie oder mit passenden Tags.
Melde dich an, um zu kommentieren.
Eine Glassmorphism-Karte mit einem Spotlight-Licht, das dem Mauszeiger folgt und den Rand zum Leuchten bringt.