使用CSS3和Javascript单击时的按钮涟漪效果

程序员文章站 2022-06-09 16:58:21

...

使用CSS3和Javascript单击时的按钮涟漪效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				flex-direction: column;
				background: #040d15;
			}
			a{
				position: relative;
				display: inline-block;
				padding: 12px 36px;
				margin: 10px 0;
				color: #fff;
				text-decoration: none;
				text-transform: uppercase;
				font-size: 18px;
				letter-spacing: 2px;
				border-radius: 40px;
				overflow: hidden;
				background: linear-gradient(90deg,#0162c8,#55e7fc);
			}	
			a:nth-child(2){
				background: linear-gradient(90deg,#755bea,#ff72c0);
			}
			span{
				position: absolute;
				background: #fff;
				transform: translate(-50%, -50%);
				pointer-events: none;
				border-radius: 50%;
				animation: animate 1s linear infinite;
			}
			@keyframes animate{
				0%{
					width: 0px;
					height: 0px;
					opacity: 0.5;
				}
				100%
				{
					width: 500px;
					height: 500px;
					opacity: 0;
				}
			}
		</style>
	</head>
	<body>
		<a href="#">Button</a>
		<a href="#">Button</a>
	</body>
	<script>
		const button = document.querySelectorAll('a');
		button.forEach(btn => {
			btn.addEventListener('click',function(e){
				let x = e.clientX - e.target.offsetLeft;
				let y = e.clientY - e.target.offsetTop;
				
				let ripples = document.createElement('span');
				ripples.style.left = x + 'px';
				ripples.style.top = y + 'px';
				
				this.appendChild(ripples);
				
				setTimeout(()=>{
					ripples.remove()
				},1000)
			})
		})
	</script>
</html>