霓虹发光卡片

预览

三张卡片在黑暗背景下脱颖而出，悬停时会激活霓虹灯和聚光灯效果。

⚡

Lightning Fast

使用边缘缓存立即加载。

🛡️

Secure by Design

安全，零信任安全。

📊

Deep Analytics

实时洞察。

用例和功能

游戏/仪表板/数字产品：适合深色主题网站。
CSS 变量加 JavaScript：使用 JavaScript 更新 --mx / --my 变量的简单实现。
使用 CSS 变量控制每张卡片的颜色：使用“—glow”变量轻松更改发光颜色。

设计和用户体验要点

通过鼠标位置控制radial-gradient的位置：通过CSS变量指定位置而不是background-position来实现聚光灯方向性。
不透明度：0 → 0.6 过渡：辉光淡入，因此悬停自然流畅。
translateY(-8px)抬起：使卡片呈现浮动的效果，强调交互性。

如何定制

要更改发光颜色，只需覆盖 --glow 变量：


/* 粉红色口音 */

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



/* 青色口音 */

.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">使用边缘缓存立即加载。</p>

  </div>

</div>

<!-- 其他卡的类似结构 -->

</div>



<style>
/* 细节与预览中的 CSS 相同 */

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

浏览器兼容性状态

|浏览器 |兼容性状态 |

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

| Chrome 49+ | ✅ 完全兼容 |

|火狐浏览器 31+ | ✅ 完全兼容 |

| Safari 9.1+ | ✅ 兼容 |

|边缘 79+ | ✅ 完全兼容 |