通用按钮点击特效

1登峰造极

已于 2023-04-10 14:09:33 修改

阅读量1.2k

点赞数 1

于 2019-05-24 18:05:06 首次发布

本文链接：https://blog.csdn.net/qq_33323469/article/details/90520981

版权

html 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

css3

4 篇文章 1 订阅

订阅专栏

网站中的按钮常用按钮通用特效，
首先按钮可以随意自己写样式

<div class="box waves">
			<p>按钮特效</p>
</div>
	.box {
				width: 300px;
				height:100px;
				background: darkblue;
				margin: 200px auto;
				border-radius: 20px;
			}
			.box p{
				text-align: center;
				line-height: 60px;
				color: #fff;	
			}

不管你这么写只要你加上 waves这个类然后又添加js

document.addEventListener("DOMContentLoaded", function() {
			var duration = 600;//显示特效时间 
			var forStyle = function(position) {
				var cssStr = "";
				for(var key in position) {
					if(position.hasOwnProperty(key)) {
						cssStr += key + ":" + position[key] + ";"
					}
				}
				return cssStr
			};
			var forRect = function(target) {
				var position = {
						top: 0,
						left: 0
					},
					ele = document.documentElement;
				"undefined" != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
				return {
					top: position.top + window.pageYOffset - ele.clientTop,
					left: position.left + window.pageXOffset - ele.clientLeft
				}
			};
			var show = function(event) {
				var pDiv = event.target,
					cDiv = document.createElement("div");
				pDiv.appendChild(cDiv);
				var rectObj = forRect(pDiv),
					_height = event.pageY - rectObj.top,
					_left = event.pageX - rectObj.left,
					_scale = "scale(" + pDiv.clientWidth / 100 * 10 + ")";
				var position = {
					top: _height + "px",
					left: _left + "px"
				};
				cDiv.className = cDiv.className + " waves-animation", cDiv.setAttribute("style", forStyle(position)), position["-webkit-transform"] = _scale, position["-moz-transform"] = _scale, position["-ms-transform"] = _scale, position["-o-transform"] = _scale, position.transform = _scale, position.opacity = "1", position["-webkit-transition-duration"] = duration + "ms", position["-moz-transition-duration"] = duration + "ms", position["-o-transition-duration"] = duration + "ms", position["transition-duration"] = duration + "ms", position["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", position["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", position["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", position["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", cDiv.setAttribute("style", forStyle(position));
				var finishStyle = {
					opacity: 0,
					"-webkit-transition-duration": duration + "ms",
					"-moz-transition-duration": duration + "ms",
					"-o-transition-duration": duration + "ms",
					"transition-duration": duration + "ms",
					"-webkit-transform": _scale,
					"-moz-transform": _scale,
					"-ms-transform": _scale,
					"-o-transform": _scale,
					top: _height + "px",
					left: _left + "px",
				};
				setTimeout(function() {
					cDiv.setAttribute("style", forStyle(finishStyle));
					setTimeout(function() {
						pDiv.removeChild(cDiv)
					}, duration)
				}, 100)
			};
			document.querySelector(".waves").addEventListener("click", function(e) {
				show(e)
			}, !1)
		}, !1);

完整案例

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box {
				width: 300px;
				height:100px;
				background: darkblue;
				margin: 200px auto;
				border-radius: 20px;
			}
			.box p{
				text-align: center;
				line-height: 60px;
				color: #fff;
				
			}
			.waves {
				position: relative;
				cursor: pointer;
				overflow: hidden;
				text-align: center;
				-webkit-tap-highlight-color: transparent;
				z-index: 1;
			}
			
			.waves .waves-animation {
				position: absolute;
				border-radius: 50%;
				width: 25px;
				height: 25px;
				opacity: 0;
				background-image: linear-gradient(to bottom , #7A88FF, #7AFFAF);
				transition: all 0.7s ease-out;
				transition-property: transform, opacity, -webkit-transform;
				-webkit-transform: scale(0);
				transform: scale(0);
				pointer-events: none;
			}
		</style>
	</head>

	<body>
		<div class="box waves">
			<p>按钮特效</p>
		</div>
	</body>
	<script type="text/javascript">
		document.addEventListener("DOMContentLoaded", function() {
			var duration = 600;//显示特效时间 
			var forStyle = function(position) {
				var cssStr = "";
				for(var key in position) {
					if(position.hasOwnProperty(key)) {
						cssStr += key + ":" + position[key] + ";"
					}
				}
				return cssStr
			};
			var forRect = function(target) {
				var position = {
						top: 0,
						left: 0
					},
					ele = document.documentElement;
				"undefined" != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
				return {
					top: position.top + window.pageYOffset - ele.clientTop,
					left: position.left + window.pageXOffset - ele.clientLeft
				}
			};
			var show = function(event) {
				var pDiv = event.target,
					cDiv = document.createElement("div");
				pDiv.appendChild(cDiv);
				var rectObj = forRect(pDiv),
					_height = event.pageY - rectObj.top,
					_left = event.pageX - rectObj.left,
					_scale = "scale(" + pDiv.clientWidth / 100 * 10 + ")";
				var position = {
					top: _height + "px",
					left: _left + "px"
				};
				cDiv.className = cDiv.className + " waves-animation", cDiv.setAttribute("style", forStyle(position)), position["-webkit-transform"] = _scale, position["-moz-transform"] = _scale, position["-ms-transform"] = _scale, position["-o-transform"] = _scale, position.transform = _scale, position.opacity = "1", position["-webkit-transition-duration"] = duration + "ms", position["-moz-transition-duration"] = duration + "ms", position["-o-transition-duration"] = duration + "ms", position["transition-duration"] = duration + "ms", position["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", position["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", position["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", position["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", cDiv.setAttribute("style", forStyle(position));
				var finishStyle = {
					opacity: 0,
					"-webkit-transition-duration": duration + "ms",
					"-moz-transition-duration": duration + "ms",
					"-o-transition-duration": duration + "ms",
					"transition-duration": duration + "ms",
					"-webkit-transform": _scale,
					"-moz-transform": _scale,
					"-ms-transform": _scale,
					"-o-transform": _scale,
					top: _height + "px",
					left: _left + "px",
				};
				setTimeout(function() {
					cDiv.setAttribute("style", forStyle(finishStyle));
					setTimeout(function() {
						pDiv.removeChild(cDiv)
					}, duration)
				}, 100)
			};
			document.querySelector(".waves").addEventListener("click", function(e) {
				show(e)
			}, !1)
		}, !1);
	</script>

</html>

1登峰造极

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
通用按钮点击特效

网站中的按钮常用按钮通用特效，首先按钮可以随意自己写样式<div class="box waves"> <p>按钮特效</p></div> .box { width: 300px; height:100px; background: darkblue; margin: 200px auto; bo...
复制链接

扫一扫