SnippetUI
← Back to snippets

Carte Neon Glow

Il s'agit d'un composant d'interface utilisateur de carte interactive dans lequel le bord de la carte s'allume comme un néon lorsqu'il est survolé et le projecteur se déplace en fonction de la position de la souris.

HTMLCSSJavaScript

Aperçu

Trois cartes se détachent sur un fond sombre et lorsqu’elles sont survolées, un effet de lumière néon et de projecteur est activé.

⚡

Lightning Fast

Chargez instantanément grâce à la mise en cache périphérique.

🛡️

Secure by Design

Coffre-fort avec une sécurité zéro confiance.

📊

Deep Analytics

Informations en temps réel.

Cas d’utilisation et fonctionnalités

  • Jeux/Tableaux de bord/Produits numériques : convient aux sites à thème sombre.

  • Variables CSS plus JavaScript : Une implémentation simple pour mettre à jour les variables --mx / --my avec JavaScript.

  • Contrôlez la couleur de chaque carte avec des variables CSS : changez facilement la couleur émettrice avec la variable --glow.

Points de conception et d’UX

  1. Contrôlez la position de « radial-gradient » avec la position de la souris : obtenez la directionnalité du projecteur en spécifiant la position avec une variable CSS au lieu de « background-position ».

  2. opacité : 0 → 0,6 transition : La lueur s’estompe, le survol est donc naturel et fluide.

  3. translateY(-8px) lift-up : L’effet de faire apparaître les cartes flottantes met l’accent sur l’interactivité.

Comment personnaliser

Pour changer la couleur de la lueur, remplacez simplement la variable --glow :


/* accent rose */

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



/* accent cyan */

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

##Code d’implémentation

<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">Chargez instantanément grâce à la mise en cache périphérique.</p>

  </div>

</div>

<!-- Structure similaire pour d'autres cartes -->

</div>



<style>
/* Les détails sont les mêmes que ceux du CSS dans l'aperçu */

.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>

État de compatibilité du navigateur

| Navigateur | Statut de compatibilité |

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

| Chrome 49+ | ✅ Entièrement compatible |

| Firefox 31+ | ✅ Entièrement compatible |

| Safari 9.1+ | ✅Compatible |

| Bord 79+ | ✅ Entièrement compatible |