Material Design按钮点击波特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Material Design按钮点击波特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material Design按钮点击波特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<style type="text/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;
			}
		}
		button {
			background-color: dodgerblue;
			color: white;
			padding: 10px 20px;
			border:0;
			font-size: 14px;
			cursor: pointer
		}
</style>

</head>
<body>
<br><br><br><br><br>
<div class="zzsc-content">
	<!-- we just added data-ripple attribute -->
	<button data-ripple>
		Demo button 1
	</button>
	<button data-ripple>
		Demo button 2
	</button>
	<button data-ripple>
		Demo button 3
	</button>
	<button data-ripple>
		Demo button 4
	</button>
	<button data-ripple>
		Demo button 5
	</button>
</div>
<script src="js/ripple.js"></script>
<script type="text/javascript">
	// just add effect to elements
		Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function(element){
			// find all elements and attach effect
			new RippleEffect(element); // element is instance of javascript element node
		});
</script>
</body>
</html>

JS代码(ripple.js):

/** * * */
function RippleEffect(element){
	this.element = element;
	this.element.addEventListener('click',this.run.bind(this),false);
}
RippleEffect.prototype ={
	run:function(event){
	var ripplerContainer = this.element.querySelector('.ripple-container');
	var offsetInfo = this.element.getBoundingClientRect();
	if(ripplerContainer){
	ripplerContainer.remove();
}
var rippleContainer = document.createElement('div');
	rippleContainer.style.position = 'fixed';
	rippleContainer.style.zIndex = 99;
	rippleContainer.style.width = offsetInfo.width + 'px';
	rippleContainer.style.left = offsetInfo.left + 'px';
	rippleContainer.style.top = offsetInfo.top + 'px';
	rippleContainer.style.height = offsetInfo.height + 'px';
	rippleContainer.className = 'ripple-container';
	rippleContainer.style.overflow = 'hidden';
	this.element.appendChild(rippleContainer);
	var circleD = offsetInfo.width * 2;
	var ripple = document.createElement('div');
	ripple.style.position = 'absolute';
	ripple.style.width = circleD + 'px';
	ripple.style.height = circleD + 'px';
	ripple.style.borderRadius = '500px';
	ripple.style.left = ((event.pageX - offsetInfo.left) - circleD/2) + 'px';
	ripple.style.top = ((event.pageY - offsetInfo.top) - circleD/2) + 'px';
	ripple.className = 'ripple';
	rippleContainer.appendChild(ripple);
	ripple.addEventListener('animationend',function(){
	rippleContainer.remove();
}
.bind(this),false);
}
}
;

CSS代码(zzsc.css):

body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
.zzsc-container{margin:0 auto;}
.zzsc-content{width:800px;margin:0 auto;padding:1em;}

附件:下载该文件资源,减少时间成本(增值服务)