HTML5 SVG鼠标点击水纹按钮代码

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

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

以下是 HTML5 SVG鼠标点击水纹按钮代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
<meta charset="gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 SVG鼠标点击水纹按钮</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

</head>

<body>
<div style="height: 0; width: 0; position: absolute; visibility: hidden;" aria-hidden="true">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false">
		<symbol id="ripply-scott" viewBox="0 0 100 100">
			<circle id="ripple-shape" cx="1" cy="1" r="1" />
		</symbol>
	</svg>
</div>
<div class="container">
	<header class="codrops-header">
		<h1><span>HTML5 SVG鼠标点击水纹按钮</span></h1>
		<nav class="codrops-demos">
			<a class="current-demo" href="index.html">演示一</a>
			<a href="index2.html">演示二</a>
			<a href="index3.html">演示三</a>
			<a href="index4.html">演示四</a>
		</nav>
	</header>
	<div class="content">
		<button id="js-ripple-btn" class="button styl-material">
			Click for Ripple
			<svg class="ripple-obj" id="js-ripple">
				<use height="100" width="100" xlink:href="#ripply-scott" class="js-ripple"></use>
			</svg>
		</button>
	</div>
</div>
<script src="js/TweenMax.min.js"></script>
<script src="js/ripple-config.js"></script>
</body>
</html>

HTML代码(index2.html):

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
<meta charset="gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 SVG鼠标点击水纹按钮</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

</head>

<body class="theme-2">
<!-- SVG Sprite -->
<div style="height: 0; width: 0; position: absolute; visibility: hidden;" aria-hidden="true">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false">
		<!-- Because of Firefox. -->
		<defs>
			<radialGradient id="gradient">
				<stop offset="0" stop-color="#0868BB" />
				<stop offset="0.25" stop-color="#0075D8" />
				<stop offset="0.35" stop-color="#0868BB" />
				<stop offset="0.50" stop-color="#0075D8" />
				<stop offset="0.60" stop-color="#0868BB" />
				<stop offset="0.85" stop-color="#0075D8" />
				<stop offset="1" stop-color="#0868BB" />
			</radialGradient>
		</defs>
		<symbol id="ripply-scott" viewBox="0 0 100 100">
			<circle id="ripple-shape" fill="url(#gradient)" cx="1" cy="1" r="1" />
		</symbol>
	</svg>
</div>
<!-- /end sprite -->
<div class="container">
	<header class="codrops-header">
		<h1><span>HTML5 SVG鼠标点击水纹按钮</span></h1>
		<nav class="codrops-demos">
			<a href="index.html">演示一</a>
			<a class="current-demo" href="index2.html">演示二</a>
			<a href="index3.html">演示三</a>
			<a href="index4.html">演示四</a>
		</nav>
	</header>
	<div class="content">
		<!-- button component -->
		<button id="js-ripple-btn" class="button styl-material">
			Click for Ripple
			<svg class="ripple-obj" id="js-ripple">
				<use height="100" width="100" xlink:href="#ripply-scott" class="js-ripple"></use>
			</svg>
		</button>
		<!-- /end button component -->
	</div>
	<!-- Related demos -->
</div>
<!-- /container -->

<script src="js/TweenMax.min.js"></script>
<script src="js/ripple-config.js"></script>
</body>
</html>

JS代码(ripple-config.js):

var ripplyScott = (function(){
	var circle = document.getElementById('js-ripple'),ripple = document.querySelectorAll('.js-ripple');
	function rippleAnimation(event,timing){
	var tl = new TimelineMax();
	x = event.offsetX,y = event.offsetY,w = event.target.offsetWidth,h = event.target.offsetHeight,offsetX = Math.abs( (w / 2) - x ),offsetY = Math.abs( (h / 2) - y ),deltaX = (w / 2) + offsetX,deltaY = (h / 2) + offsetY,scale_ratio = Math.sqrt(Math.pow(deltaX,2) + Math.pow(deltaY,2));
	console.log('x is:' + x);
	console.log('y is:' + y);
	console.log('offsetX is:' + offsetX);
	console.log('offsetY is:' + offsetY);
	console.log('deltaX is:' + deltaX);
	console.log('deltaY is:' + deltaY);
	console.log('width is:' + w);
	console.log('height is:' + h);
	console.log('scale ratio is:' + scale_ratio);
	tl.fromTo(ripple,timing,{
	x:x,y:y,transformOrigin:'50% 50%',scale:0,opacity:1,ease:Linear.easeIn}
,{
	scale:scale_ratio,opacity:0}
);
	return tl;
}
return{
	init:function(target,timing){
	var button = document.getElementById(target);
	button.addEventListener('click',function(event){
	rippleAnimation.call(this,event,timing);
}
);
}
}
;
}
)();
	ripplyScott.init('js-ripple-btn',0.75);

CSS代码(component.css):

/* Component styles */
button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;box-shadow:inset 1px 1px 1px rgba(255,255,255,0.3),0 3px 3px rgba(0,0,0,0.15),0 3px 2px -2px rgba(0,0,0,0.2);font-weight:bold;color:#fff;font-size:1.25em;text-shadow:0 -0.5px 1px rgba(0,0,0,0.15);}
.button{padding:1.5em 3em;margin:0;position:relative;min-width:250px;display:inline-block;}
.button.styl-material{-webkit-transition:200ms background cubic-bezier(0.4,0,0.2,1);transition:200ms background cubic-bezier(0.4,0,0.2,1);background:#E91E63;}
.button.styl-material:hover,.button.styl-material:focus{outline:none;background:#EC407A;}
.ripple-obj{height:100%;pointer-events:none;position:absolute;top:0;left:0;z-index:0;width:100%;fill:#AD1457;}
.ripple-obj use{opacity:0;}
/* Colors */
.theme-2 .button.styl-material{background:#2196F3;}
.theme-2 .button.styl-material:hover,.theme-2 .button.styl-material:focus{background:#2b9bf4;}
.theme-3 .button.styl-material{background:#009688;}
.theme-3 .button.styl-material:hover,.theme-3 .button.styl-material:focus{background:#26A69A;}
.theme-3 .ripple-obj{fill:#00695C;}

CSS代码(demo.css):

@font-face{font-weight:normal;font-style:normal;font-family:'codropsicons';src:url('../fonts/codropsicons/codropsicons.eot');src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),url('../fonts/codropsicons/codropsicons.woff') format('woff'),url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');}
*,*:after,*:before{-webkit-box-sizing:border-box;box-sizing:border-box;}
.clearfix:before,.clearfix:after{display:table;content:'';}
.clearfix:after{clear:both;}
body{font-family:Avenir,'Helvetica Neue','Lato','Segoe UI',Helvetica,Arial,sans-serif;color:#3C4954;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{outline:none;color:#E91E63;text-decoration:none;}
.theme-2 a{color:#2196F3;}
.theme-3 a{color:#009688;}
a:hover,a:focus{color:#1F3546;}
.hidden{position:absolute;overflow:hidden;width:0;height:0;pointer-events:none;}
/* Header */
.codrops-header{padding:2em 1em 2em;text-align:center;}
.codrops-header h1{margin:0.5em 0 0;letter-spacing:-1px;font-size:3em;line-height:1;}
.codrops-header h1 span{display:block;padding:0.5em 0 1em;color:#A4B0B9;font-weight:normal;font-size:0.45em;}
/* Top Navigation Style */
.codrops-links{position:relative;display:inline-block;text-align:center;white-space:nowrap;}
.codrops-links::after{position:absolute;top:0;left:50%;width:1px;height:100%;background:rgba(0,0,0,0.1);content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.codrops-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.codrops-icon span{display:none;}
.codrops-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'codropsicons';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
.codrops-icon--drop:before{content:"\e001";}
.codrops-icon--prev:before{content:"\e004";}
/* Demo links */
.codrops-demos{margin:2em 0 0;}
.codrops-demos a{display:inline-block;margin:0 0.5em;font-weight:bold;}
.codrops-demos a.current-demo{color:#3C4954;}
/* Content */
.content{padding:5em 0 8em;text-align:center;}
/* Related demos */
.content--related{text-align:center;font-weight:bold;}
.media-item{display:inline-block;padding:1em;vertical-align:top;}
.media-item__img{max-width:100%;opacity:0.6;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;}
.media-item:hover .media-item__img,.media-item:focus .media-item__img{opacity:1;}
.media-item__title{margin:0;padding:0.5em;font-size:1em;color:#A4B0B9;-webkit-transition:color 0.3s;transition:color 0.3s;}
.media-item:hover .media-item__title,.media-item:focus .media-item__title{color:#3C4954;}
@media screen and (max-width:50em){.codrops-header{padding:3em 10% 4em;}
.codrops-demos a{display:block;margin-bottom:1em;}
.content{padding:0 0 5em;}
}
@media screen and (max-width:40em){.codrops-header h1{font-size:2.8em;}
}

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