css按钮想加入波纹点击效果怎么制作_通过::after伪元素扩散并结合动画-css教程-PHP中文网

css按钮想加入波纹点击效果怎么制作_通过::after伪元素扩散并结合动画

P粉602998670

发布： 2025-12-12 18:33:49

原创

149人浏览过

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

css按钮想加入波纹点击效果怎么制作_通过::after伪元素扩散并结合动画

用 ::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 保证结束状态保留（避免闪回）。

微软爱写作

微软出品的免费英文写作/辅助/批改/评分工具

130

查看详情

立即学习“前端免费学习笔记（深入）”；

::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