按钮图标
带反光特效的按钮插件
PetitQ
这是一款 js 和 css3 带反光特效的按钮插件。该特效是在鼠标移动时，按钮和附近的按钮有光线的明暗效果，类似黑暗中一束光线照射到了按钮上的 3D 光照效果。
使用方法：
在页面中引入 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 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
}})
该 js 和 css3 带反光特效的按钮插件的 github 地址为：https://github.com/CodeHimBlog/jquery-codehim-analog-clock
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
