超详细！前端必学的CSS动态水波涟漪效果实现全攻略

嘿，前端的小伙伴们！在如今这个追求极致用户体验的Web开发时代，CSS作为前端三剑客之一，能创造出无数令人眼前一亮的视觉效果。今天咱就来聊聊超火的CSS动态水波涟漪效果！这种效果不仅能瞬间提升网页的交互感和趣味性，还是面试中常被问到的加分项，妥妥的前端热搜关键词！当用户点击按钮或元素时，水波涟漪缓缓扩散开来，仿佛真的在水面上泛起层层波纹，别提多酷炫了！接下来，我就带大家用多种方法实现这个效果，代码全都安排上超详细注释，包教包会！

一、使用CSS动画实现水波涟漪效果

先给大家介绍最基础也最常用的方法------利用CSS动画来实现水波涟漪效果。这种方法简单易懂，兼容性也不错，就算是刚入门的前端小白也能轻松上手！

1. HTML结构搭建

首先，咱们得搭建好HTML结构。很简单，就创建一个按钮元素，后续点击它的时候就会触发涟漪效果。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- 引入CSS样式文件 -->
  <title>CSS水波涟漪效果</title>
</head>

<body>
  <button class="ripple-button">点击我触发涟漪</button>
</body>

</html>

2. CSS样式编写

接下来就是重头戏------CSS样式编写啦！我们要给按钮添加涟漪效果，还得定义好动画。

css 复制代码

/* 重置浏览器默认样式，让页面更统一 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 给按钮设置基本样式 */
.ripple-button {
  padding: 10px 20px;
  background-color: #007bff; /* 按钮背景色 */
  color: white; /* 文字颜色 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停变成指针样式 */
  position: relative; /* 相对定位，为涟漪效果做准备 */
  overflow: hidden; /* 隐藏超出按钮范围的涟漪 */
}

/* 定义涟漪元素的样式 */
.ripple-button::after {
  content: ""; /* 伪元素必须设置content属性 */
  position: absolute; /* 绝对定位，相对于按钮定位 */
  width: 100%;
  height: 100%;
  border-radius: 50%; /* 让涟漪呈圆形 */
  background-color: rgba(255, 255, 255, 0.3); /* 半透明白色涟漪 */
  opacity: 0; /* 初始隐藏涟漪 */
  transform: scale(0); /* 初始缩放为0 */
  transition: all 0.5s ease; /* 添加过渡效果，让涟漪出现更平滑 */
}

/* 当按钮被点击时，触发涟漪动画 */
.ripple-button:active::after {
  opacity: 1; /* 显示涟漪 */
  transform: scale(2); /* 放大涟漪 */
}

在这段代码里，我们通过::after伪元素创建了涟漪，然后利用CSS的transition过渡效果，让涟漪在按钮被点击（active状态）时，从无到有、从小到大平滑地展示出来。是不是很神奇？这种方法实现的涟漪效果简单实用，在很多网页的按钮交互中都能看到它的身影！

二、借助CSS3的@keyframes实现更复杂的涟漪动画

虽然前面的方法已经能实现不错的涟漪效果了，但如果你想要更复杂、更个性化的动画，那就得用到CSS3的@keyframes规则啦！@keyframes就像是动画的导演，能精确控制动画的每一帧变化，妥妥的CSS动画核心关键词！

1. HTML结构沿用

还是用之前的HTML结构，按钮元素不用变，我们直接在CSS里修改动画效果。

2. CSS样式升级

css 复制代码

/* 重置浏览器默认样式，让页面更统一 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 给按钮设置基本样式 */
.ripple-button {
  padding: 10px 20px;
  background-color: #007bff; /* 按钮背景色 */
  color: white; /* 文字颜色 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停变成指针样式 */
  position: relative; /* 相对定位，为涟漪效果做准备 */
  overflow: hidden; /* 隐藏超出按钮范围的涟漪 */
}

/* 定义涟漪动画 */
@keyframes ripple {
  from {
    opacity: 1; /* 动画开始时，涟漪完全显示 */
    transform: scale(0); /* 动画开始时，涟漪缩放为0 */
  }
  to {
    opacity: 0; /* 动画结束时，涟漪隐藏 */
    transform: scale(3); /* 动画结束时，涟漪放大到3倍 */
  }
}

/* 定义涟漪元素的样式 */
.ripple-button::after {
  content: ""; /* 伪元素必须设置content属性 */
  position: absolute; /* 绝对定位，相对于按钮定位 */
  width: 100%;
  height: 100%;
  border-radius: 50%; /* 让涟漪呈圆形 */
  background-color: rgba(255, 255, 255, 0.3); /* 半透明白色涟漪 */
  animation: ripple 1s ease-out; /* 应用涟漪动画，持续1秒，缓出效果 */
  animation-fill-mode: forwards; /* 动画结束后保持最后一帧状态 */
}

这里我们用@keyframes定义了ripple动画，详细规定了涟漪从出现到消失的整个过程。然后通过animation属性将动画应用到涟漪元素上，还设置了animation-fill-mode: forwards，让动画结束后涟漪保持消失的状态，避免重复出现奇怪的视觉效果。这种方法能实现更丰富的动画变化，比如你可以调整动画的时间、速度曲线，甚至添加多个涟漪动画，让效果更酷炫！

三、结合JavaScript动态生成涟漪效果

前面两种方法都是纯CSS实现的，但如果我们想更灵活地控制涟漪效果，比如在多个不同元素上点击都能触发，或者根据点击位置动态生成涟漪，那就得请出JavaScript来帮忙了！JavaScript和CSS的结合可是前端开发的热门趋势，妥妥的热搜组合！

1. HTML结构调整

我们在HTML里多添加几个元素，方便测试不同元素点击触发涟漪的效果。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- 引入CSS样式文件 -->
  <title>CSS水波涟漪效果</title>
</head>

<body>
  <button class="ripple-element">点击我触发涟漪</button>
  <div class="ripple-element">点击这个div也有涟漪</div>
  <a href="#" class="ripple-element">点击链接试试</a>
  <script src="script.js"></script> <!-- 引入JavaScript脚本文件 -->
</body>

</html>

2. CSS样式准备

先准备好基础的涟漪样式，和之前类似，但这次我们要让它能通过JavaScript动态应用到不同元素上。

css 复制代码

/* 重置浏览器默认样式，让页面更统一 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 涟漪元素的基础样式 */
.ripple-element {
  padding: 10px 20px;
  background-color: #007bff; /* 背景色 */
  color: white; /* 文字颜色 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停变成指针样式 */
  position: relative; /* 相对定位，为涟漪效果做准备 */
  overflow: hidden; /* 隐藏超出元素范围的涟漪 */
}

/* 涟漪样式 */
.ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  animation: ripple-effect 1s ease-out;
  animation-fill-mode: forwards;
}

/* 定义涟漪动画 */
@keyframes ripple-effect {
  from {
    opacity: 1;
    transform: scale(0);
  }
  to {
    opacity: 0;
    transform: scale(3);
  }
}

3. JavaScript脚本编写

重头戏来了！通过JavaScript来动态生成涟漪元素，并添加到点击的元素上。

javascript 复制代码

// 获取所有带有.ripple-element类的元素
const rippleElements = document.querySelectorAll('.ripple-element');

// 遍历每个元素，添加点击事件监听器
rippleElements.forEach((element) => {
  element.addEventListener('click', function (event) {
    // 获取点击位置的坐标
    const x = event.clientX - this.offsetLeft;
    const y = event.clientY - this.offsetTop;

    // 创建涟漪元素
    const ripple = document.createElement('span');
    ripple.classList.add('ripple');
    ripple.style.left = x + 'px';
    ripple.style.top = y + 'px';

    // 将涟漪元素添加到点击的元素中
    this.appendChild(ripple);

    // 动画结束后移除涟漪元素
    ripple.addEventListener('animationend', function () {
      this.remove();
    });
  });
});

这段JavaScript代码首先获取所有带有.ripple-element类的元素，然后为每个元素添加点击事件监听器。当元素被点击时，获取点击位置的坐标，动态创建涟漪元素，并设置其位置，最后添加到点击的元素中。动画结束后，再将涟漪元素移除，保证页面不会残留多余元素。这种方法超级灵活，能实现很多有趣的交互效果，比如在图片上点击也能触发涟漪，瞬间提升网页的可玩性！

四、使用CSS变量（自定义属性）实现涟漪效果的动态调整

CSS变量，也就是自定义属性，是CSS里超实用的功能！它能让我们更方便地动态调整样式，也是当下前端开发的热门技术点。用它来实现涟漪效果，可以轻松改变涟漪的颜色、大小、动画时间等属性，满足各种个性化需求！

1. HTML结构

还是用之前的多元素结构，方便测试不同元素的涟漪效果。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- 引入CSS样式文件 -->
  <title>CSS水波涟漪效果</title>
</head>

<body>
  <button class="ripple-variable">点击我触发涟漪</button>
  <div class="ripple-variable">点击这个div也有涟漪</div>
  <a href="#" class="ripple-variable">点击链接试试</a>
</body>

</html>

2. CSS样式编写

css 复制代码

/* 重置浏览器默认样式，让页面更统一 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 涟漪元素的基础样式 */
.ripple-variable {
  padding: 10px 20px;
  background-color: var(--button-bg, #007bff); /* 使用CSS变量设置背景色，默认值为#007bff */
  color: white; /* 文字颜色 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停变成指针样式 */
  position: relative; /* 相对定位，为涟漪效果做准备 */
  overflow: hidden; /* 隐藏超出元素范围的涟漪 */
}

/* 定义涟漪元素的样式，使用CSS变量 */
.ripple-variable::after {
  content: ""; /* 伪元素必须设置content属性 */
  position: absolute; /* 绝对定位，相对于元素定位 */
  width: 100%;
  height: 100%;
  border-radius: 50%; /* 让涟漪呈圆形 */
  background-color: var(--ripple-color, rgba(255, 255, 255, 0.3)); /* 使用CSS变量设置涟漪颜色，默认值为半透明白色 */
  opacity: 0; /* 初始隐藏涟漪 */
  transform: scale(0); /* 初始缩放为0 */
  transition: all var(--animation-duration, 0.5s) ease; /* 使用CSS变量设置动画时间，默认值为0.5秒 */
}

/* 当元素被点击时，触发涟漪动画 */
.ripple-variable:active::after {
  opacity: 1; /* 显示涟漪 */
  transform: scale(2); /* 放大涟漪 */
}

/* 全局设置CSS变量，也可以在具体元素上覆盖 */
:root {
  --button-bg: #007bff;
  --ripple-color: rgba(255, 255, 255, 0.3);
  --animation-duration: 0.5s;
}

通过CSS变量，我们可以在:root选择器里全局设置默认的样式属性，也能在具体元素上覆盖这些变量，轻松实现不同元素的涟漪效果个性化定制。比如你想让某个按钮的涟漪颜色变成红色，只需要在该按钮的样式里重新设置--ripple-color变量就行，超方便！

五、总结与拓展

到这里，我们已经学习了四种实现CSS动态水波涟漪效果的方法，从基础的CSS动画到结合JavaScript的动态生成，再到利用CSS变量的灵活调整，每种方法都有它的特点和适用场景。

在实际项目中，我们可以根据需求选择合适的方法。如果只是简单的按钮涟漪效果，纯CSS的方法就足够了；要是需要更复杂的交互和动态控制，那就结合JavaScript；而CSS变量则能让我们轻松实现样式的个性化定制。

除了这些方法，还有很多拓展的可能性。比如可以给涟漪添加阴影效果，让它看起来更立体；或者结合CSS的filter滤镜，让涟漪有更炫酷的视觉变化。大家可以发挥自己的创意，打造出独一无二的水波涟漪效果！

希望这篇文章能帮到各位前端小伙伴，赶紧动手试试这些方法，给你的网页加上超酷炫的涟漪特效吧！要是在实践过程中有任何问题，欢迎在评论区交流讨论，咱们一起把前端开发玩出花来！