SnippetUI
← Back to snippets

Card Neon Glow

Đây là thành phần giao diện người dùng thẻ tương tác trong đó cạnh của thẻ sáng lên như đèn neon khi được di chuột và đèn chiếu sẽ di chuyển tùy theo vị trí của chuột.

HTMLCSSJavaScript

Xem trước

Ba thẻ nổi bật trên nền tối và khi được di chuột, hiệu ứng ánh đèn neon và ánh đèn sân khấu sẽ được kích hoạt.

⚡

Lightning Fast

Tải ngay lập tức với bộ nhớ đệm cạnh.

🛡️

Secure by Design

An toàn với bảo mật không tin cậy.

📊

Deep Analytics

Thông tin chi tiết theo thời gian thực.

Trường hợp sử dụng và tính năng

  • Trò chơi/Trang tổng quan/Sản phẩm kỹ thuật số: Thích hợp cho các trang web có chủ đề tối.

  • Biến CSS cộng với JavaScript: Một cách triển khai đơn giản để cập nhật các biến --mx / --my bằng JavaScript.

  • Kiểm soát màu của từng thẻ bằng các biến CSS: Dễ dàng thay đổi màu phát ra bằng biến --glow.

Điểm thiết kế và UX

  1. Kiểm soát vị trí của radial-gradient bằng vị trí của chuột: Đạt được hướng của đèn chiếu bằng cách chỉ định vị trí bằng biến CSS thay vì background-position.

  2. opacity: 0 → 0.6 chuyển tiếp: Ánh sáng mờ dần nên di chuột tự nhiên và mượt mà.

  3. translateY(-8px) nâng lên: Hiệu ứng làm cho các thẻ xuất hiện nổi nhấn mạnh tính tương tác.

Cách tùy chỉnh

Để thay đổi màu ánh sáng, chỉ cần ghi đè biến --glow:


/* giọng hồng */

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



/* giọng lục lam */

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

Mã triển khai

<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">Tải ngay lập tức với bộ nhớ đệm cạnh.</p>

  </div>

</div>

<!-- Cấu trúc tương tự cho các thẻ khác -->

</div>



<style>
/* Chi tiết giống như CSS trong Preview */

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

Trạng thái tương thích với trình duyệt

| Trình duyệt | Trạng thái tương thích |

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

| Chrome 49+ | ✅ Hoàn toàn tương thích |

| Firefox 31+ | ✅ Hoàn toàn tương thích |

| Safari 9.1+ | ✅ Tương thích |

| Cạnh 79+ | ✅ Hoàn toàn tương thích |