HTML 按钮涟漪特效

ziblog

已于 2025-06-27 13:57:07 修改

阅读量343

点赞数 3

CC 4.0 BY-SA版权

文章标签： html javascript 前端

于 2025-05-27 15:10:08 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148258053

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按钮涟漪特效</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}

.btn-container {
position: relative;
overflow: hidden;
}

.ripple-btn {
position: relative;
padding: 12px 24px;
background-color: #6200ea;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
overflow: hidden;
transition: background-color 0.3s;
}

.ripple-btn:hover {
background-color: #7c4dff;
}

.ripple {
position: absolute;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.7);
transform: scale(0);
animation: ripple 0.6s linear;
pointer-events: none;
}

@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}

.link {
position: absolute;
bottom: 20px;
color: #666;
text-decoration: none;
}

.link:hover {
color: #6200ea;
}
</style>
</head>
<body>
<div class="btn-container">
<button class="ripple-btn">点击我查看特效</button>
</div>


<script>
const buttons = document.querySelectorAll('.ripple-btn');

buttons.forEach(button => {
button.addEventListener('click', function(e) {
const x = e.clientX - e.target.getBoundingClientRect().left;
const y = e.clientY - e.target.getBoundingClientRect().top;

const ripple = document.createElement('span');
ripple.classList.add('ripple');
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;

this.appendChild(ripple);

setTimeout(() => {
ripple.remove();
}, 600);
});
});
</script>
</body>
</html>