这是一款js和css3带反光特效的按钮插件。该特效是在鼠标移动时，按钮和附近的按钮有光线的明暗效果，类似黑暗中一束光线照射到了按钮上的3D光照效果-94爱码

效果如下

使用方法

在页面中引入fluent-reveal-effect.css文件和fluent-reveal-effect.js文件。

<link href="css/fluent-reveal-effect.css" rel="stylesheet"> <script type="text/javascript" src="js/fluent-reveal-effect.js"></script>

HTML

使用一个<button>原始在页面中创建一个按钮。

<button class="btn">按钮</button>

CSS样式

然后为按钮添加下面的CSS样式。

.btn { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; padding: 1rem 2rem; background-color: #333; color: #fff; border: 0; transition: all 200ms ease;}.btn-border { display: inline-block; margin: 5px;}.btn-border .btn { display: block; margin: 2px;}

初始化插件

最后通过下面的方法来初始化该反光特效的按钮插件。

FluentRevealEffect.applyEffect(".btn", { lightColor: "rgba(255,255,255,0.1)", gradientSize: 150})

如果需要制作点击时的点击波效果，可以使用clickEffect参数。

FluentRevealEffect.applyEffect(".btn", { clickEffect: true})

如果想制作按钮边框的光亮效果，HTML代码和js代码如下：

<div class="effect-group-container"> <div class="btn-border"> <button class="btn">Button 2</button> </div> <div class="btn-border"> <button class="btn">Button 3</button> </div> <div class="btn-border"> <button class="btn">Button 4</button> </div></div>

FluentRevealEffect.applyEffect(".effect-group-container", { clickEffect: true, lightColor: "rgba(255,255,255,0.6)", gradientSize: 80, isContainer: true, children: { borderSelector: ".btn-border", elementSelector: ".btn", lightColor: "rgba(255,255,255,0.3)", gradientSize: 150 }})

1 本网站名称：94爱码
2 本站永久网址：94aima.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请提供版权证明联系邮箱QQ2687526902@qq.com进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站不保证所提供软件或程序的完整性和安全性，一经下载慨不负责，如不能接受请勿下载！
QQ交流群

THE END

工具插件