js实现波纹
实现波纹效果的方法
使用JavaScript实现波纹效果可以通过监听点击事件，动态创建并动画化一个圆形元素来模拟水波纹扩散的效果。以下是实现步骤：
HTML结构
<button class="ripple-button">点击我</button>CSS样式
.ripple-button {
position: relative;
overflow: hidden;
padding: 12px 24px;
background-color: #6200ee;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.ripple {
position: absolute;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.7);
transform: scale(0);
animation: ripple 600ms linear;
pointer-events: none;
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}JavaScript代码
document.querySelectorAll('.ripple-button').forEach(button => {
button.addEventListener('click', function(e) {
const ripple = document.createElement('span');
ripple.classList.add('ripple');
const rect = this.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;
ripple.style.width = ripple.style.height = `${size}px`;
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
this.appendChild(ripple);
ripple.addEventListener('animationend', () => {
ripple.remove();
});
});
});实现原理
-
创建基本按钮结构并设置
position: relative和overflow: hidden，这是为了限制波纹效果在按钮范围内显示。 -
当按钮被点击时，创建一个
span元素作为波纹效果的基础元素，并添加ripple类。 -
计算点击位置相对于按钮的位置，确保波纹从点击点开始扩散。
-
设置波纹元素的大小为按钮宽高中的最大值，确保波纹能完全覆盖按钮。
-
使用CSS动画实现波纹扩散效果，通过
scale变换使元素从小到大，同时逐渐降低透明度。 -
动画结束后移除波纹元素，避免DOM中积累过多无用元素。
增强版本
如果需要更高级的效果，可以添加以下改进：
document.querySelectorAll('.ripple-button').forEach(button => {
button.addEventListener('mousedown', function(e) {
if (e.button !== 0) return; // 只响应左键点击
const ripple = document.createElement('span');
ripple.classList.add('ripple');
const rect = this.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;
ripple.style.width = ripple.style.height = `${size}px`;
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
const existingRipples = this.querySelectorAll('.ripple');
existingRipples.forEach(r => r.remove());
this.appendChild(ripple);
});
});这个版本做了以下改进：
- 使用
mousedown事件而非click事件，响应更快 - 检查鼠标按键，确保只有左键会触发效果
- 移除之前未完成的波纹效果，避免重叠
浏览器兼容性
这种方法在现代浏览器中都能良好工作，包括Chrome、Firefox、Safari和Edge。如果需要支持较旧的浏览器，可能需要添加CSS前缀：
@keyframes ripple {
to {
-webkit-transform: scale(4);
transform: scale(4);
opacity: 0;
}
}性能考虑
- 使用
requestAnimationFrame可以进一步优化动画性能 - 避免在快速连续点击时创建过多波纹元素
- 考虑使用CSS硬件加速（如
transform和opacity）来提高动画流畅度
这种波纹效果实现方式轻量且高效，适合大多数Web应用场景。
