您是否曾经在那些令人惊叹的网站上遇到过一些东西，当您徘徊在它们上时，元素似乎会闪闪发光并发光？好吧，您很幸运，因为在这个快速教程中，我将向您展示如何使用称为useGlossEffect的自定义React Hook创建酷的掩饰效果。
但首先，让我们在到期时给予信用。我们受到启发，创建了Tahazsh对Codepen创建的令人敬畏的颜色效果的此React版本。您可以在这里查看原始笔：Tahazsh's CodePen。
让我们从演示开始：
造型光泽效果
我们将首先使用CSS定义光泽的外观。我们将创建一个名为.gloss的类，指定光泽的不透明，大小，位置和美丽的径向梯度背景。
制作useGlossEffect钩
我们光泽效果的核心是useGlossEffect钩。该钩子将三个引用作为参数：cardRef，cardContentRef和glossRef。这些引用分别指向卡元素，卡内容和光泽元素。
在钩子内，我们有三个关键功能：
ðaddShineClass()
此函数将光泽 - 闪光类添加到我们的光泽元素中。这类班级触发过渡，并在我们悬停时光泽。
ðº游戏mapNumberRange()
mapNumberRange函数的核心是一个基本的数学概念，称为线性插值。线性插值是一种基于两个端点处的已知值在给定范围内估算值的技术。在我们的情况下，我们利用此技术将一个值从一个范围绘制到另一个范围。
ð§®calculateTransformValues()
在此功能中，我们计算了光泽效应所需的各种值，包括旋转度，翻译和不透明度。我们使用鼠标指针的位置和卡片的尺寸来确定光泽的表现。感谢塔哈兹（Tahazsh）的数学。
- 冷11
在这里，我们将计算出的转换和不透明度应用于我们的卡内容和光泽元素，从而创造了令人着迷的效果。它使用上一步中计算的值。
将所有这些融合在一起
要完成我们的光泽效果，我们将其包装在useEffect块中。当组件安装并删除事件侦听器时，这种效果会初始化光的效果。
用法
要使用这种迷人的光泽效果，只需将useGlossEffect挂钩导入您的React组件并调用，并传递适当的参考文献。您可以使用它：
，你有！您已经成功地为您的React组件添加了令人着迷的光泽效果，从Tahazsh在Codepen上的出色作品中汲取了灵感。现在，是时候看到您的卡片悬停在悬停时，带着迷人的光泽和闪闪发光的时候了。
随意分叉Codepen演示，并为Tahazsh提供探索更具启发性UX的关注。
愉快的编码！ ð -