react-glow

React 发光

为 React 组件添加鼠标追踪光泽效果。 光晕效果只能在使用鼠标作为光标时生效。点击事件不会触发此效果。 请在 codaworks.com 上实时观看。

安装

使用 npm 安装该包:

npm i @codaworks/react-glow

使用方法

将任意数量的 组件包装在 中,这些组件将用于跟踪鼠标位置。

  This won't glow
  
    
      This will glow purple when the mouse is passed over
    
  

can 可以让子元素自行决定在发光时的外观。您可能会选择保留某些子元素不变,或者使用 glow: 变体样式突出显示它们。

color 的值将作为 CSS 变量 --glow-color 以及 Tailwind 的 glow 颜色提供。您可以传递任何有效的 CSS 颜色,包括 hsl() 值等。当然,您也可以选择使用其他颜色;您可以完全忽略 color 属性。

component 会克隆子树。克隆的树然后堆叠在原始树的上方。覆盖树是透明的，我们只使用 CSS 径向渐变遮罩来显示部分内容。遮罩位置会通过跟踪鼠标位置来更新。当您使用 glow: 变体或 [glow] 属性选择器时，它只针对覆盖树。