如何用JavaScript编写实现按钮点击后产生涟漪效果的代码？

本文共计1787个文字，预计阅读时间需要8分钟。

目录前言分析实现总结前言不熟悉Material UI？这是一个React UI组件库，实现了Google的Material Design。Material Design设计规范中包含了许多关于点击的流畅效果。分析实现总结

目录

• 前言
• 分析
• 实现
• 总结

前言

不知道你们有没有使用过 Material UI。这是一个 React UI 组件库，它实现了 Google 的 Material Design。

Material Design 设计规范中包含了很多关于点击的涟漪效果，类似于一块石头跌落水中所产生的波浪效果。

以下是效果图

速度放慢之后的效果：

我们把 overflow: hidden 去掉之后：

本文就以 Material Design 中的涟漪效果作为目标，来使用原生的 JavaScript、CSS、HTML 来实现此效果。

分析

通过观察，我们可以发现点击的涟漪效果是在鼠标点击的点开始以一个正圆往外扩散。