Karanlık bir arka planda üç kart öne çıkıyor ve üzerine gelindiğinde bir neon parıltısı ve spot ışığı efekti etkinleştiriliyor.
Edge önbelleğe alma özelliğiyle anında yükleyin.
Sıfır güven güvenliğiyle güvende.
Gerçek zamanlı bilgiler.
Oyunlar/Kontrol Panelleri/Dijital Ürünler: Koyu temalı siteler için uygundur.
CSS değişkenleri artı JavaScript: --mx / --my değişkenlerini JavaScript ile güncellemek için basit bir uygulama.
Her kartın rengini CSS değişkenleriyle kontrol edin: Yayılan rengi “—glow” değişkeniyle kolayca değiştirin.
‘Radyal-gradyan’ın konumunu farenin konumuyla kontrol edin: Konumu ‘background-position’ yerine bir CSS değişkeniyle belirterek spot ışığı yönlülüğü elde edin.
opaklık: 0 → 0,6 geçiş: Parıltı yavaş yavaş kaybolur, böylece vurgu doğal ve pürüzsüz olur.
translateY(-8px) lift-up: Kartların kayan görünmesini sağlama etkisi etkileşimi vurgular.
Işıma rengini değiştirmek için --glow değişkenini geçersiz kılmanız yeterlidir:
/* pembe vurgu */
.neon-card { --glow: #ec4899; }
/* camgöbeği vurgusu */
.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">Edge önbelleğe alma özelliğiyle anında yükleyin.</p>
</div>
</div>
<!-- Diğer kartlar için benzer yapı -->
</div>
<style>
/* Ayrıntılar Önizlemedeki CSS ile aynıdır */
.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>| Tarayıcı | Uyumluluk durumu |
|----------|----------|
| Krom 49+ | ✅ Tamamen uyumlu |
| Firefox 31+ | ✅ Tamamen uyumlu |
| Safari 9.1+ | ✅ Uyumlu |
| Kenar 79+ | ✅ Tamamen uyumlu |