答案：利用CSS的::after伪元素和animation，通过定位、缩放和透明度变化实现按钮点击时的水波纹效果，结合overflow:hidden裁剪扩散动画，可适配不同尺寸按钮，提升交互体验。
按钮点击时的水波纹效果是提升用户交互体验的常见设计。利用 CSS 的 animation 和 ::after 伪元素，可以轻松实现这一视觉反馈，无需 JavaScript。以下是具体实现方法。
1. 基础结构与样式
先创建一个简单的按钮元素：
<button class="ripple-btn">点击我</button>
设置基础样式，确保伪元素能正确定位：
.ripple-btn {
position: relative;
padding: 12px 24px;
font-size: 16px;
color: white;
background-color: #007bff;
border: none;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
outline: none;
}
2. 使用 ::after 创建水波纹元素
::after 用于生成水波纹的圆形视觉层。初始状态设为完全透明且缩放为0：
立即学习“前端免费学习笔记（深入）”；
.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%);
opacity: 0;
}
3. 定义水波纹动画
通过 @keyframes 定义从中心扩散并逐渐消失的动画：
@keyframes ripple {
0% {
width: 0;
height: 0;
opacity: 0.8;
}
100% {
width: 300px;
height: 300px;
opacity: 0;
}
}
在按钮被点击（即处于 :active 状态）时触发动画：
.ripple-btn:active::after {
animation: ripple 0.6s ease-out;
}
4. 可选优化：适配不同按钮尺寸
若希望水波纹大小根据按钮动态调整，可将动画中的固定值改为基于容器的百分比或使用更大范围：
@keyframes ripple {
0% {
width: 0;
height: 0;
opacity: 0.8;
}
100% {
width: 400%;
height: 400%;
opacity: 0;
}
}
配合 overflow: hidden，超出部分会被裁剪，形成自然扩散效果。
基本上就这些。通过结合 ::after 和 animation，就能用纯 CSS 实现简洁美观的点击水波纹效果，适合用在初级项目中增强交互感。不复杂但容易忽略细节，比如定位和透明度过渡。
