实现平面圆形水波纹动画的核心思路
平面圆形的水波纹动画本质是让多个圆形元素从中心向外扩散，同时逐渐降低透明度直到消失。我们可以通过CSS的伪元素创建波纹元素，再配合animation属性定义扩散和淡出动画，就能实现自然的水波纹效果。
基础实现步骤
首先需要准备一个作为波纹容器的元素，这个容器需要设置相对定位，方便内部的波纹元素绝对定位到中心位置。然后利用::before和::after伪元素创建两个波纹，通过不同的动画延迟让它们交替扩散，形成连续的效果。
1. 定义容器样式
容器需要固定宽高，并且设置相对定位，同时隐藏超出容器的部分，避免波纹扩散到容器外影响布局。
/* 波纹容器样式 */
.ripple-container {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f0f0f0;
overflow: hidden;
cursor: pointer;
}
2. 定义波纹基础样式
波纹元素需要绝对定位到容器中心，初始状态是较小的圆形，并且完全不透明。
/* 波纹公共样式 */
.ripple-container::before,
.ripple-container::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(64, 158, 255, 0.6);
transform: translate(-50%, -50%);
/* 初始状态无尺寸，完全透明 */
opacity: 0;
}
3. 定义扩散动画关键帧
动画需要让波纹从中心向外扩大，同时逐渐变透明，最后完全消失。
/* 波纹扩散动画 */
@keyframes ripple {
0% {
width: 0;
height: 0;
opacity: 0.8;
}
100% {
width: 200px;
height: 200px;
opacity: 0;
}
}
4. 为伪元素绑定动画
给两个伪元素分别设置动画，第二个伪元素的动画延迟执行，形成交替扩散的效果。
/* 第一个波纹动画 */
.ripple-container::before {
animation: ripple 1.5s ease-out infinite;
}
/* 第二个波纹动画，延迟0.75s执行 */
.ripple-container::after {
animation: ripple 1.5s ease-out 0.75s infinite;
}
完整示例代码
以下是可直接运行的完整代码，包含了容器和波纹的所有样式，点击容器就能看到持续的水波纹效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>平面圆形水波纹动画</title>
<style>
.ripple-container {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f0f0f0;
overflow: hidden;
cursor: pointer;
margin: 50px auto;
}
.ripple-container::before,
.ripple-container::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(64, 158, 255, 0.6);
transform: translate(-50%, -50%);
opacity: 0;
}
@keyframes ripple {
0% {
width: 0;
height: 0;
opacity: 0.8;
}
100% {
width: 200px;
height: 200px;
opacity: 0;
}
}
.ripple-container::before {
animation: ripple 1.5s ease-out infinite;
}
.ripple-container::after {
animation: ripple 1.5s ease-out 0.75s infinite;
}
</style>
</head>
<body>
<div class="ripple-container"></div>
</body>
</html>
效果调整方法
如果需要修改水波纹的效果，可以调整以下几个属性：
- 修改
background-color的值可以调整波纹的颜色 - 修改
animation的时长可以调整波纹扩散的速度 - 修改关键帧中100%状态的
width和height可以调整波纹的最大扩散范围 - 增加更多伪元素或者子元素，设置不同的动画延迟，可以生成更多层叠加的波纹效果
注意：如果波纹的最大扩散范围超过容器尺寸，需要适当调大容器的宽高，或者调整关键帧中的最大尺寸，避免波纹被容器裁剪过多影响效果。