Material Design 是一种通过动画、阴影和深度等元素来传达层次感和现实感的设计风格。在这个风格中，水波纹效果是非常流行且令人愉悦的交互体验。在本文中，我们将介绍如何在前端应用中创建水波纹效果。
HTML 结构
首先，让我们看一下需要使用的基本 HTML 结构：
<button class="ripple-effect">Click me!</button>
我们将在一个按钮上添加水波纹效果。接下来，我们需要为其添加样式，使其呈现出水波纹效果。
CSS 样式
下面是实现水波纹效果的基本 CSS 样式：
-- -------------------- ---- ------- -------------- - --------- --------- --------- ------- ---------- -------------- -- --- - -------------------- - -------- --- -------- ------ --------- --------- ------ ----- ------- ----- ---- -- ----- -- --------------- ----- ----------------- ----------------------- ---- ---- ----------- -------- ------------------ ---------- -------------------- ---- ---------- --------- ---- -------- -- ----------- --------- ---- ------- --- - --------------------------- - ---------- -------- --- -------- --- ----------- --- -
首先，我们将按钮的位置设置为相对定位，以便在其中创建绝对定位的水波纹元素。overflow 属性被设置为 hidden，以确保水波纹效果不会溢出按钮。
下一步，我们创建一个伪元素 :after。该伪元素将被用作水波纹的背景，并被定位到按钮上。通过设置 pointer-events 属性为 none，在点击事件中不会阻止原始按钮的点击事件发生。 背景图像由 radial-gradient 创建，circle 参数指定了圆形形状，#000 是水波纹的颜色，transparent 是透明度 0 的背景色。这个定义让10%处是水波纹的颜色，10.01%处是透明背景色。在 background-repeat 中设置 no-repeat，以避免水波纹重复出现。background-position 属性设置为50%，以确保水波纹从按钮中心开始扩散。
然后我们需要将水波纹元素进行缩放并设置其初始状态。通过设置 transform 属性为 scale(10, 10)，将水波纹元素放大 10 倍。opacity 属性被设置为 0，以便在初始状态下水波纹元素不可见。
最后，我们定义了两个过渡动画。当按钮被点击时，通过将 transform 和 opacity 属性设置为 scale(0, 0) 和 .2，水波纹元素会逐渐消失并变得更加透明。transition 属性用于定义动画的过渡效果和时间。
JavaScript 代码
最后，我们需要编写一些 JavaScript 代码来处理点击事件，并添加水波纹效果。下面是示例代码：
-- -------------------- ---- -------
----- ------- - --------------------------------------------
------------------------ -- -
-------------------------------- --- -- -
----- - - ----------
----- - - ----------
----- --------- - -------------------
----- ---------- - --------------------
----- ------- - - - -----------
----- ------- - - - ----------
----- ------ - -------------------------------
--------------------------------------
---------------- - ---------------
----------------- - ---------------
---------------------------
------------- -- -
----------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------