首页 > 文章 > 前端

按钮点击水波纹效果实现教程

时间：2025-12-08 11:19:42 389浏览收藏

推广推荐

免费电影APP ➜

支持 PC / 移动端，安全直达

珍惜时间，勤奋学习！今天给大家带来《按钮点击水波纹动画实现方法》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

答案：利用CSS的::after伪元素和animation，通过定位、缩放和透明度变化实现按钮点击时的水波纹效果，结合overflow:hidden裁剪扩散动画，可适配不同尺寸按钮，提升交互体验。

CSS初级项目如何实现按钮点击水波纹_animation与::after伪元素结合

按钮点击时的水波纹效果是提升用户交互体验的常见设计。利用 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 实现简洁美观的点击水波纹效果，适合用在初级项目中增强交互感。不复杂但容易忽略细节，比如定位和透明度过渡。

今天关于《按钮点击水波纹效果实现教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

CSS 水波纹