Tiga kartu menonjol dengan latar belakang gelap, dan saat diarahkan, efek cahaya neon dan sorotan diaktifkan.
Muat secara instan dengan edge caching.
Aman dengan keamanan tanpa kepercayaan.
Wawasan waktu nyata.
Game/Dasbor/Produk Digital: Cocok untuk situs bertema gelap.
Variabel CSS plus JavaScript: Implementasi sederhana untuk memperbarui variabel --mx / --my dengan JavaScript.
Kontrol warna setiap kartu dengan variabel CSS: Ubah warna yang dipancarkan dengan mudah menggunakan variabel --glow.
Kontrol posisi radial-gradient dengan posisi mouse: Dapatkan arah sorotan dengan menentukan posisi menggunakan variabel CSS, bukan background-position.
opacity: 0 → 0.6 transisi: Cahaya memudar, sehingga gerakan melayang terlihat alami dan mulus.
Peningkatan translateY(-8px): Efek membuat kartu tampak mengambang menekankan interaktivitas.
Untuk mengubah warna cahaya, cukup ganti variabel --glow:
/* aksen merah muda */
.neon-card { --glow: #ec4899; }
/* aksen cyan */
.neon-card { --glow: #06b6d4; }
<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">Muat secara instan dengan edge caching.</p>
</div>
</div>
<!-- Struktur serupa untuk kartu lain -->
</div>
<style>
/* Detailnya sama dengan CSS di Pratinjau */
.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>| Peramban | Status kompatibilitas |
|--------|-------|
| Chrome 49+ | ✅ Sepenuhnya kompatibel |
| Firefox 31+ | ✅ Sepenuhnya kompatibel |
| Safari 9.1+ | ✅ Kompatibel |
| Tepi 79+ | ✅ Sepenuhnya kompatibel |