这是一款使用纯js制作的炫酷Material Design风格按钮点击波特效。该按钮点击波特效不依赖于任何外部库,使用纯js制作,运行速度快,效果非常炫酷。
使用方法
在页面中引入ripple.js文件。
<script src="path/to/ripple.js"></script>
HTML结构
为你需要制作按钮点击波效果的元素添加data-ripple
属性。
<button data-ripple>Click Me</button>
CSS样式
为点击波添加下面的CSS样式:
.ripple-container { } .ripple-container .ripple{ background-color: rgba(255,255,255,0.4); animation: ripple 2s forwards cubic-bezier(0, 0, 0.2, 1); } @keyframes ripple { 0% { transform: scale(0); opacity: 1; } 80% { transform: scale(1); } 100% { opacity: 0; } }
初始化插件
使用下面的JavaScript代码来在按钮点击时,激活点击波效果。
Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function(element){ new RippleEffect(element); });
material-ripple-effect按钮点击波特效的github地址为:https://github.com/davinder17s/material-ripple-effect
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!