CSS按钮波纹效果制作详解

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《CSS按钮波纹效果制作教程》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

用::after实现按钮波纹效果需JS动态设置点击坐标并绑定CSS动画：按钮设relative定位和overflow:hidden；::after初始隐藏、圆形、居中定位；点击时计算相对坐标写入--x/--y变量；动画从scale(0)opacity(0.6)扩散至scale(3)opacity(0)，结束保留状态。

用 ::after 伪元素实现按钮波纹点击效果，核心是：在点击时动态生成一个圆形遮罩，从点击位置中心向外扩散、透明度渐隐。关键在于获取点击坐标、定位伪元素、触发动画。

1. 基础结构与定位准备

按钮本身需设为相对定位（position: relative），以便 ::after 能以它为参考进行绝对定位。伪元素初始隐藏，尺寸为 0，圆角设为 50% 实现圆形。

• 给按钮加 position: relative; overflow: hidden;（防止波纹溢出）
• ::after 设为 content: ""、position: absolute、border-radius: 50%
• 初始状态：opacity: 0; transform: scale(0);

2. 动态设置点击坐标（JS 必不可少）

CSS 无法自动读取鼠标位置，必须用 JavaScript 在点击时计算并写入自定义属性（如 --x、--y），再由 ::after 读取。

• 监听按钮 click 事件
• 用 event.clientX - button.getBoundingClientRect().left 算出相对于按钮的 X 坐标（同理算 Y）
• 通过 button.style.setProperty('--x', x + 'px') 和 --y 写入

3. 动画与样式绑定

伪元素通过 CSS 变量定位，并用 @keyframes 控制扩散+淡出。动画需设为 forwards 保证结束状态保留（避免闪回）。

• ::after 定位：left: var(--x); top: var(--y); transform: translate(-50%, -50) scale(0);
• 动画关键帧：从 scale(0) opacity(0.6) → scale(3) opacity(0)
• 触发动画：transition: transform 0.4s ease, opacity 0.4s ease; 或直接用 animation

4. 防止连续点击错位的小技巧

快速连点可能导致多个波纹叠加或定位错误。可加简单节流或重置逻辑：

• 每次点击前先清除上一次的动画类（如有）或重置 ::after 的 transform 和 opacity
• 用 getComputedStyle 检查是否正在动画中，跳过重复触发
• 或更简单：动画结束后用 animationend 事件自动清空 --x/--y

基本上就这些。不复杂但容易忽略 JS 坐标计算和伪元素定位的配合。做好这几点，波纹就能稳稳从指尖绽开。

本篇关于《CSS按钮波纹效果制作详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！