ripplet.js按钮点击波动画特效

多种效果的ripplet.js按钮点击波动画特效，可以自定义参数制作并控制点击波效果，生成自己风格的点击波插件代码。

js代码

<script type="text/javascript" src="js/ripplet.js"></script>
<script>
  // window.event polyfill for Gecko
  if (!Object.prototype.hasOwnProperty.call(window, 'event')) {
	['mousedown', 'mouseenter', 'onmouseleave'].forEach(function (eventType) {
	  window.addEventListener(eventType, function (event) { window.event = event }, true);
	});
  }

  // heading ripplet
  window.addEventListener('load', function () {
	setTimeout(function () {
	  var heading = document.querySelector('h1.title');
	  var headingRect = heading.getBoundingClientRect();
	  headingRipplet();
	  function headingRipplet() {
		var spreadingDuration = Math.floor(4000 * Math.random() + 200);
		ripplet(
		  {
			currentTarget: heading,
			clientX: headingRect.left + Math.random() * headingRect.width,
			clientY: headingRect.top + Math.random() * headingRect.height,
		  },
		  {
			color: 'rgba('
			  + Math.floor(Math.random() * 256) + ','
			  + Math.floor(Math.random() * 256) + ','
			  + Math.floor(Math.random() * 256) + ','
			  + (Math.random() * .3 + .1)
			  + ')',
			spreadingDuration: spreadingDuration + 'ms',
			clearingDelay:     Math.floor(spreadingDuration * .8) + 'ms',
			clearingDuration:  Math.floor(spreadingDuration * .6) + 'ms',
		  }
		);
		setTimeout(headingRipplet, Math.floor(4000 * Math.random() * Math.random()));
	  }
	});
  });
</script>

在线预览
资源均来自第三方，谨慎下载，前往第三方网站下载