效果如下
使用方法
在页面中引入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 : 1 rem 2 rem; background-color : #333 ; color : #fff ; border : 0 ; transition : all 200 ms 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交流群
2 本站永久网址:94aima.cn
3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请提供版权证明联系邮箱QQ2687526902@qq.com进行删除处理。
4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5 本站不保证所提供软件或程序的完整性和安全性,一经下载慨不负责,如不能接受请勿下载!
QQ交流群
THE END