SnippetUI
← Back to snippets

Neon-Glow-Karte

Hierbei handelt es sich um eine interaktive Karten-UI-Komponente, bei der der Rand der Karte beim Bewegen der Maus wie ein Neonlicht aufleuchtet und sich der Scheinwerfer je nach Mausposition bewegt.

HTMLCSSJavaScript

Vorschau

Drei Karten heben sich vor einem dunklen Hintergrund ab und wenn man darüber fährt, wird ein Neonlicht- und Spotlight-Effekt aktiviert.

⚡

Lightning Fast

Sofortiges Laden mit Edge-Caching.

🛡️

Secure by Design

Sicher mit Zero-Trust-Sicherheit.

📊

Deep Analytics

Einblicke in Echtzeit.

Anwendungsfälle und Funktionen

  • Spiele/Dashboards/Digitale Produkte: Geeignet für Websites mit dunklen Themen.

  • CSS-Variablen plus JavaScript: Eine einfache Implementierung zum Aktualisieren von „—mx“ / „—my“-Variablen mit JavaScript.

  • Steuern Sie die Farbe jeder Karte mit CSS-Variablen: Ändern Sie die Ausgabefarbe ganz einfach mit der Variable „—glow“.

Design- und UX-Punkte

  1. Steuern Sie die Position von „radial-gradient“ mit der Position der Maus: Erzielen Sie eine Spotlight-Richtung, indem Sie die Position mit einer CSS-Variablen anstelle von „background-position“ angeben.

  2. Deckkraft: 0 → 0,6 Übergang: Das Leuchten wird eingeblendet, sodass der Schwebeflug natürlich und sanft ist.

  3. translateY(-8px)-Lift-up: Der Effekt, die Karten schwebend erscheinen zu lassen, betont die Interaktivität.

So passen Sie es an

Um die Leuchtfarbe zu ändern, überschreiben Sie einfach die Variable „—glow“:


/* rosa Akzent */

.neon-card { --glow: #ec4899; }



/* Cyan-Akzent */

.neon-card { --glow: #06b6d4; }

Implementierungscode

<div class="neon-cards-grid">

<div class="neon-card neon-card-1">

  <div class="neon-card-content">

    <div class="neon-card-icon">⚡</div>

    <h3 class="neon-card-title">Lightning Fast</h3>

    <p class="neon-card-desc">Sofortiges Laden mit Edge-Caching.</p>

  </div>

</div>

<!-- Ähnlicher Aufbau für andere Karten -->

</div>



<style>
/* Die Details entsprechen denen von CSS in der Vorschau */

.neon-cards-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 2rem;

}



.neon-card {

--glow: #6366f1;

position: relative;

background: #111;

border-radius: 16px;

padding: 2px;

cursor: pointer;

transition: transform 0.3s ease;

overflow: hidden;

}



.neon-card::before {

content: "";

position: absolute;

inset: 0;

background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 40%);

opacity: 0;

transition: opacity 0.3s ease;

}



.neon-card:hover {

transform: translateY(-8px);

}

.neon-card:hover::before {

opacity: 0.6;

}



.neon-card-content {

position: relative;

background: #111;

border-radius: 14px;

padding: 2rem;

height: 100%;

z-index: 1;

}



.neon-card-1 { --glow: #ec4899; }

.neon-card-2 { --glow: #06b6d4; }

.neon-card-3 { --glow: #8b5cf6; }
</style>



<script>

(function() {

document.querySelectorAll('.neon-card').forEach(function(card) {

  card.addEventListener('mousemove', function(e) {

    var rect = card.getBoundingClientRect();

    card.style.setProperty('--mx', ((e.clientX-rect.left)/rect.width*100)+'%');

    card.style.setProperty('--my', ((e.clientY-rect.top)/rect.height*100)+'%');

  });

});

})();

</script>

Browserkompatibilitätsstatus

| Browser | Kompatibilitätsstatus |

|--------|-------|

| Chrom 49+ | ✅ Vollständig kompatibel |

| Firefox 31+ | ✅ Vollständig kompatibel |

| Safari 9.1+ | ✅ Kompatibel |

| Kante 79+ | ✅ Vollständig kompatibel |