插件描述:js和css3实现的带反光特效的按钮插件。鼠标悬停在按钮上时,按钮和附近的按钮有光线的明暗效果,类似黑暗中一束光线照射到了按钮上的3D光照效果。
更新时间:2019-11-27 23:50:11
Reveal Effect library
将显示效果应用于元素的边框和背景。
使用方法
在页面中引入fluent-reveal-effect.css文件和fluent-reveal-effect.js文件。
HTML
使用一个原始在页面中创建一个按钮。按钮
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代码如下:
HTML
Button 2
Button 3
Button 4
JavaScriptFluentRevealEffect.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
}
})