反应发光

添加鼠标跟踪发光效果到 React 组件 .

发光效果只能使用鼠标作为指针. 触摸事件不会触发它.

看它活着 codaworks.com (英语)。 。 。 .

安装

用 npm 安装软件包 :

npm i @codaworks/react-glow

使用量

环绕任意编号 <Glow> a 中的组件 <GlowCapture> 用于跟踪鼠标位置.

<GlowCapture>
  <span>This won't glow</span>
  <Glow color='purple'>
    <span className='text-black glow:text-glow/50 glow:bg-red-100'>
      This will glow purple when the mouse is passed over
    </span>
  </Glow>
</GlowCapture>

儿童 <Glow> 可以给自己发光时的外观作风 你可能选择让一些孩子保持原样,或者用 glow: 变相风格.

价值 color 将作为 CSS 变量提供 --glow-color以及尾风 glow 颜色. 您可以通过任何有效的 CSS 颜色, 包括 hsl() 数值等. 当然,你可能选择使用其他颜色;你可以不使用 color 完全为道具.

尾风

添加尾风插件以解锁 glow: 变式和 glow 颜色

tailwind.config.js

module.exports = {
  ...
  plugins: [
    require('@codaworks/react-glow/tailwind')
  ]
}

与 Tailwind 中的所有颜色一样,您可以通过在颜色后附加一个百分比来添加不透明性,例如 bg-glow/20 20%的不透明度.

香草CSS( 香草CSS)

您可以用香草 CSS 来塑造发光效果 :

<GlowCapture>
  <span>This won't glow</span>
  <Glow color='hsl(338.69 100% 48.04%)'>
    <span className='glowable-text'>
      This will glow pink when the mouse is passed over
    </span>
  </Glow>
</GlowCapture>

.glowable-text {
  color: black;
}

[glow] .glowable-text {
  color: var(--glow-color);
}

归属

灵感来自 这个推特。 。 。 .