CSS如何使用Sass实现点击波纹效果_通过Mixin封装CSS动画

张开发
• 2026/4/16 0:30:18 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

CSS如何使用Sass实现点击波纹效果_通过Mixin封装CSS动画
波纹效果本质是伪元素动画transform用::after生成圆形遮罩并scale放大Sass统一控制变量JS触发is-rippling类实现交互。波纹效果的本质是伪元素 动画 transform点击波纹Ripple不是靠 JS 画圆而是用 ::after 伪元素动态生成一个圆形遮罩再用 transform: scale() 从中心点放大、透明度渐变收尾。Sass 的价值不在“实现动画”而在统一控制尺寸、颜色、持续时间这些变量避免每个按钮都写一遍重复的 keyframes 和 transition。关键约束伪元素必须设 position: absolute父容器得是 position: relative否则波纹会脱出边界而且不能用 width/height 动画——性能差还容易触发重排。用 mixin ripple 封装时必须传入颜色和尺寸参数硬编码 $color: rgba(255,255,255,0.3) 看似省事但深色主题按钮需要浅色波纹禁用态又要灰掉不传参就只能复制 mixin 或后期覆盖。尺寸同理$size 决定波纹最大半径它应该和按钮高度相关比如 max(100px, 2 * $button-height)而不是固定 200px。mixin ripple($color, $size: 200px, $duration: 0.5s) —— 三个参数都设默认值但调用时至少传 $color内部用 abs($size) 防止负值传入导致 scale() 异常动画曲线建议用 cubic-bezier(0.25, 0.46, 0.45, 0.94)比 ease-out 更自然绑定事件要靠 JS 触发 .is-rippling 类不是纯 CSSSass 只管样式无法监听点击。必须用 JS 在 mousedown 时加类在 animationend 后移除。常见错误是直接监听 click——波纹还没开始放缩就移除了类动画被中断或者忘了清空旧的 ::after导致多次点击堆叠多个伪元素。 Tellers AI Tellers是一款自动视频编辑工具可以将文本、文章或故事转换为视频。

更多文章