rippler是一款效果非常炫酷的jQuery和CSS3图片和按钮点击波特效插件。点击波特效是指在按钮或图片上点击的时候,从点击的位置开始,会产生一种圆形光波向外辐射的炫酷效果。这款点击波特效同时支持桌面设备和移动触摸设备。
相同的效果还有:jQuery和CSS3炫酷按钮点击波特效。
使用方法
与Bootstrap结合使用
该点击波特效可以完美的和Bootstrap 3结合,用于制作按钮和链接按钮的点击波特效:
bootstrap按钮点击波效果:
rippler-defaultbootstrap超链接按钮点击波效果:
rippler-bs-danger在图片上使用点击波特效
使用步骤
- 在页面中引入必要的文件:
- 该点击波特效的HTML结构如下:
- 在页面加载完毕后调用该点击波插件: $(document).ready(function() { $(".rippler").rippler({ effectClass : 'rippler-effect' ,effectSize : 16 // Default size (width & height) ,addElement : 'div' // e.g. 'svg'(feature) ,duration : 400 }); });
浏览器兼容
该点击波特效需要CSS3的支持,可以运行在所有最新版的现代浏览器上。
- IE10+
- Safari
- Chrome
- Firefox
- Opera
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!