写了一个React动画插件（有点小不能算库了。），用于在Web上实现FluentDesign中的描边光效

 开门见山

        是这个&＃xff0c;在这里&＃xff0c;看它&＃xff1a;react-reveal-effect

react-reveal-effect - npmhttps://www.npmjs.com/package/react-reveal-effect

优点 

        速度快&＃xff0c;使用简单&＃xff0c;直接使用 RevealEffect 组件包裹住你想要实现光效的HTML元素&＃xff0c;就有效果了。

        也可以使用useRevealEffect Hook 直接自己写光效元素的样式&＃xff0c;很自由。

缺陷

        使用嵌套父子元素实现光效边框的效果&＃xff0c;其实并不是border。

        使用background-image实现光效。如果为了不对元素本身的样式造成影响&＃xff08;比如和自己写的background-image冲突了&＃xff09;&＃xff0c;请在内部添加一个光效元素。

        施加光效的元素不能透明。透明了就看到下面随着鼠标运动的background-image了。

        下面推荐的库里&＃xff0c;react-uwp可以支持元素透明。

说一点废话&＃xff0c;推荐一点别的库

        之前就对Windows 开始菜单中的按钮描边光效很馋&＃xff0c;在网上搜了一下都没有Web的实现&＃xff0c;连Microsoft基于React实现的官方库Fluent Design Component都没实现这个光效。。

        过了很久才找到一个React的实现&＃xff0c;是使用canvas绘制描边光效。很厉害比较完善不过性能不是很好。作者也不维护了&＃xff0c;应该就是个玩具

&＃xff08;点进作者的github&＃xff0c;可以看到他把实现光效的库剥离出来了&＃xff0c;可以直接使用这个库实现自己的效果&＃xff09;
https://www.react-uwp.com/get-startedhttps://www.react-uwp.com/get-started        又找到了一个使用background-image实现描边光效的库&＃xff0c;这个库仅用于实现描边光效&＃xff0c;且仅适用于原生html&＃43;js&＃xff0c;在React里使用有点&＃61;-&＃61;。不过能用。&＃xff08;我的库就是受到它的启发实现的。

fluent-reveal-effect - npmhttps://www.npmjs.com/package/fluent-reveal-effect   通过寻找它的Dependents也找到了一个vue的fluent design组件库

vfluentdesign - npmhttps://www.npmjs.com/package/vfluentdesign