答案：通过伪元素和CSS动画实现按钮点击波纹效果。1. 设置按钮相对定位和溢出隐藏；2. 利用::after创建居中圆点并动画扩展；3. 可用scale适配不同尺寸；4. 居中波纹无需JS，简单高效。
给按钮添加点击波纹效果可以提升用户体验，让交互更具有视觉反馈。使用伪元素和 CSS 的 animation 能够轻松实现这一效果，无需 JavaScript。以下是具体实现方法。
1. 基本结构与样式
先定义一个按钮的基本样式，确保它有相对定位，以便伪元素能正确定位：
.ripple-btn {
position: relative;
padding: 12px 24px;
font-size: 16px;
color: white;
background-color: #007bff;
border: none;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
}
关键点： 设置 overflow: hidden 可以裁剪超出按钮范围的波纹动画；position: relative 是为了让伪元素相对于按钮定位。
2. 使用 ::after 伪元素创建波纹
通过 ::after 伪元素生成波纹圆，并用 animation 控制其缩放和透明度变化：
立即学习“前端免费学习笔记（深入）”；
.ripple-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
animation: ripple 0.6s linear;
}
@keyframes ripple {
0% {
width: 0;
height: 0;
opacity: 0.8;
}
100% {
width: 300px;
height: 300px;
opacity: 0;
}
}
说明：
- 伪元素从按钮中心（top: 50%, left: 50%）出发，配合 transform 居中定位。
- 初始宽高为 0，模拟波纹从点击点扩散。
- animation 控制大小增长和透明度消失，形成扩散淡出效果。
- pointer-events: none 确保伪元素不影响按钮的点击事件。
3. 可选优化：根据按钮大小动态调整波纹范围
如果按钮尺寸不一，可以把 animation 中的固定值改为基于元素宽度的计算，比如使用更大的 scale 值或结合 CSS 自定义属性增强灵活性：
@keyframes ripple {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0.8;
}
100% {
transform: translate(-50%, -50%) scale(4);
opacity: 0;
}
}
使用 scale 比直接改宽高更容易适配不同尺寸按钮。
4. 注意事项
这种纯 CSS 方式适用于静态按钮。若需精确从点击位置触发波纹（如非居中点击），则需要 JavaScript 动态创建元素。但若只需简单居中波纹反馈，上述方法足够高效且兼容性好。
基本上就这些。用伪元素 + animation 实现波纹效果简洁直观，适合大多数基础场景。
