ZNZBBS纸南针社区 总是编成这个样:
.flarum-click-ripple {
position: fixed;
width: 40px;
height: 40px;
border: 2px solid rgba(100, 100, 255, 0.3);
border-radius: 50%;
animation: flarum-ripple 0.8s cubic-bezier(0, 0.2, 0.8, 1);
pointer-events: none;
transform: translate(-50%, -50%) scale(0);
z-index: 9999;
}
@keyframes flarum-ripple {
to {
transform: translate(-50%, -50%) scale(2);
opacity: 0;
}
}
/* 适配黑暗模式 */
[data-theme="dark"] .flarum-click-ripple {
border-color: rgba(200, 200, 255, 0.4);
}
````// 点击特效(适配Flarum)
document.addEventListener('click', (e) => {
// 排除以下元素:
if (e.target.closest('input, textarea, select, .Dropdown-menu, .Button')) return;
const ripple = document.createElement('div');
ripple.className = 'flarum-click-ripple';
ripple.style.left = `${e.clientX}px`;
ripple.style.top = `${e.clientY}px`;
document.body.appendChild(ripple);
setTimeout(() => ripple.remove(), 800);
});