带反光特效的按钮插件

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

使用方法：

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

也想出现在这里？联系我们吧

HTML 代码：

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

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

CSS 样式：

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

1. .btn {

2.   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

3.   padding: 1rem 2rem;

4.   background-color: #333;

5.   color: #fff;

6.   border: 0;

8.   transition: all 200ms ease;

9. }

10. .btn-border {

11.   display: inline-block;

12.   margin: 5px;

13. }

14. .btn-border .btn {

15.   display: block;

16.   margin: 2px;

17. }

初始化插件：

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

1. FluentRevealEffect.applyEffect(".btn", {

2.   lightColor: "rgba(255,255,255,0.1)",

3.   gradientSize: 150

4. })

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

1. FluentRevealEffect.applyEffect(".btn", {

2.   clickEffect: true

3. })

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

1. <div class="effect-group-container">

2.     <div class="btn-border">

3.         <button class="btn">Button 2</button>

4.     </div>

5.     <div class="btn-border">

6.         <button class="btn">Button 3</button>

7.     </div>

8.     <div class="btn-border">

9.         <button class="btn">Button 4</button>

10.     </div>

11. </div>

1. FluentRevealEffect.applyEffect(".effect-group-container", {

2.   clickEffect: true,

3.   lightColor: "rgba(255,255,255,0.6)",

4.   gradientSize: 80,

5.   isContainer: true,

6.   children: {

7.     borderSelector: ".btn-border",

8.     elementSelector: ".btn",

9.     lightColor: "rgba(255,255,255,0.3)",

10.     gradientSize: 150

11.   }

12. })

该 js 和 css3 带反光特效的按钮插件的 github 地址为：https://github.com/CodeHimBlog/jquery-codehim-analog-clock

带反光特效的按钮插件

已有 390 人购买

• 永久更新：
• 演示数据：

此资源下载价格为1元立即购买（VIP 免费）立即升级

查看演示升级 VIP立刻购买

演示地址

下载地址

咨询客服 中文演示

专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！