如何用Tailwind CSS复刻目标网格并实现鼠标移动悬浮效果？

网格格式确认 #

这类网格图案通常无需使用SVG，而是通过CSS背景渐变直接绘制，这也是你审查元素未发现SVG文件的原因。

用Tailwind CSS实现基础网格 #

通过background-image结合线性渐变绘制横竖线条，配合background-size控制网格间距：

<div class="relative min-h-screen bg-white">
  <!-- 网格背景层 -->
  <div class="absolute inset-0 bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:24px_24px]"></div>
  <!-- 内容层（需置于网格上方） -->
  <div class="relative z-10 container mx-auto px-4 py-8">
    <!-- 此处添加页面内容 -->
  </div>
</div>

• bg-[linear-gradient(...)]：分别定义水平和垂直方向的1px线条，线条颜色可替换为你需要的色调
• bg-[size:24px_24px]：控制网格单元格的大小，数值可按需调整
• 内容层通过relative z-10确保位于网格之上

实现鼠标移动悬浮效果 #

结合JavaScript跟踪鼠标位置，配合CSS径向渐变和过渡效果实现悬浮扩散效果：

1. 更新HTML结构，添加悬浮效果层 #

<div class="relative min-h-screen bg-white overflow-hidden">
  <!-- 网格背景层 -->
  <div class="absolute inset-0 bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:24px_24px]"></div>
  <!-- 鼠标悬浮效果层 -->
  <div id="hover-overlay" class="absolute inset-0 pointer-events-none bg-[radial-gradient(circle,rgba(229,231,235,0.6)_0,rgba(229,231,235,0)_60px)] opacity-0 transition-opacity duration-300"></div>
  <!-- 内容层 -->
  <div class="relative z-10 container mx-auto px-4 py-8">
    <!-- 页面内容 -->
  </div>
</div>

2. 添加JavaScript逻辑 #

const hoverOverlay = document.getElementById('hover-overlay');

// 跟踪鼠标位置更新渐变中心
document.addEventListener('mousemove', (e) => {
  hoverOverlay.style.opacity = '1';
  hoverOverlay.style.backgroundPosition = `${e.clientX}px ${e.clientY}px`;
});

// 鼠标离开时隐藏效果
document.addEventListener('mouseleave', () => {
  hoverOverlay.style.opacity = '0';
});

效果自定义 #

• 调整径向渐变的rgba值可改变悬浮区域的颜色和透明度
• 修改60px可调整悬浮效果的扩散半径
• 调整duration-300可改变效果的过渡速度

内容的提问来源于stack exchange，提问作者Tharindu Jayasanka