[codebox lang="css" group="霓虹流光" title="样式（流光+3D）"]
[/codebox]
[codebox lang="html" group="霓虹流光" title="结构（三张卡片）"]
霓虹流光卡片
边框与标题的渐变色会持续流动，鼠标悬停时卡片跟随指针做 3D 倾斜，手机端自动关闭倾斜只保留流动光效。
落日暖光卡片
同一份代码只改了三个颜色变量，换配色时直接改 style 里的 --c1 / --c2 / --c3 即可，不用动样式表。
薄荷极光卡片
所有样式都用 #nx-neon 作用域包住，按钮和标题做了独立重置，不会污染主题原有样式，也不会被主题顶掉。
以上代码仅供学习与交流，请保留本行与文件头注释。
[/codebox]
[codebox lang="js" group="霓虹流光" title="交互（跟随指针+光波）"]// 霓虹流光卡片 · JS 段 | group="霓虹流光"
(function () {
var root = document.getElementById('nx-neon');
if (!root) { return; }
var items = [].slice.call(root.querySelectorAll('.nx-item'));
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion:reduce)').matches;
var fine = window.matchMedia && window.matchMedia('(hover:hover) and (pointer:fine)').matches;
if (fine && !reduce) {
items.forEach(function (item) {
var card = item.querySelector('.nx-card');
item.addEventListener('pointermove', function (ev) {
var r = item.getBoundingClientRect();
var px = (ev.clientX - r.left) / r.width - .5;
var py = (ev.clientY - r.top) / r.height - .5;
card.style.setProperty('--ry', (px * 12).toFixed(2) + 'deg');
card.style.setProperty('--rx', (-py * 10).toFixed(2) + 'deg');
});
item.addEventListener('pointerleave', function () {
card.style.setProperty('--ry', '0deg');
card.style.setProperty('--rx', '0deg');
});
});
}
root.addEventListener('click', function (ev) {
var btn = ev.target.closest ? ev.target.closest('.nx-btn') : null;
if (!btn || reduce) { return; }
var sp = document.createElement('span');
sp.className = 'nx-ripple';
var size = Math.max(btn.offsetWidth, btn.offsetHeight) || 80;
sp.style.width = sp.style.height = size + 'px';
sp.style.left = (ev.clientX - btn.getBoundingClientRect().left) + 'px';
sp.style.top = (ev.clientY - btn.getBoundingClientRect().top) + 'px';
btn.appendChild(sp);
setTimeout(function () { sp.parentNode.removeChild(sp); }, 640);
});
})();
[/codebox]
原创文章，如若转载，请注明出处：维形筑网https://wxzcw.com/53-2/
