用 CSS 实现波浪边缘动画效果
文章目录
前言
在网页设计中，细节处的动态效果往往能让页面质感翻倍。今天想和大家分享一个实用又出效果的小技巧 —— 仅用
HTML和CSS，就能做出视觉上很灵动的波浪边缘动画，不用复杂的JS，也不用额外的图片素材，新手也能轻松上手。
效果预览
页面中会呈现两个色彩不同的方块，方块的四个边缘都带有持续滚动的波浪动画效果，波浪线条细腻且动态流畅，整体视觉上既简洁又有层次感，这种效果可以适配在卡片、按钮、模块边框等多种场景中。
目标与实现思路
核心目标
通过
纯 CSS实现元素边缘的波浪动画，让静态元素具备动态视觉效果，提升页面交互质感。
实现思路
- 利用
HTML 结构搭建基础容器，通过多标签承载不同方向的波浪效果；- 借助
CSS 变量简化色彩、角度等样式的复用与调整；- 用
radial-gradient绘制径向渐变模拟波浪的圆弧形态，通过背景重复和尺寸控制形成连续波浪；- 结合
@keyframes定义背景位置的偏移动画，让波浪呈现滚动效果；- 通过
rotate旋转不同的波浪载体，实现四个方向的波浪环绕效果。
HTML结构说明
HTML 结构非常简洁，核心是一个.container容器包裹两个.box方块，每个.box内部有 4 个标签。其中：
.container用于统一布局两个展示方块，控制间距；.box是承载波浪效果的核心容器，通过行内 CSS 变量–clr定义各自的主色调；4 个<span>分别对应方块上下左右四个方向的波浪，通过–i变量标记不同旋转角度，实现方向控制。
<div class="container">
<!-- 第一个波浪方块，自定义主色调变量--clr -->
<div class="box" style="--clr: #2196f3">
<!-- 4个span分别承载四个方向的波浪，通过--i标记旋转角度 -->
<span style="--i: 0;"></span>
<span style="--i: 1;"></span>
<span style="--i: 2;"></span>
<span style="--i: 3;"></span>
</div>
<!-- 第二个波浪方块，更换主色调 -->
<div class="box" style="--clr: #ff5566">
<span style="--i: 0;"></span>
<span style="--i: 1;"></span>
<span style="--i: 2;"></span>
<span style="--i: 3;"></span>
</div>
</div>CSS样式详解
1. 基础重置与布局
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* 统一盒模型，避免padding影响元素尺寸 */
}
body {
display: flex;
justify-content: center;
align-items: center;
/* 让容器垂直水平居中 */
min-height: 100vh;
/* 占满视口高度，保证居中效果 */
background: #333;
/* 深色背景突出波浪效果 */
}
.container {
position: relative;
display: flex;
gap: 25px;
/* 控制两个方块之间的间距 */
}2. 方块容器基础样式
.container .box {
position: relative;
width: 360px;
height: 360px;
background: var(--clr);
/* 调用行内定义的--clr变量，设置方块主色 */
}
/* 方块内部半透明遮罩，增加层次感 */
.container .box::before {
content: '';
position: absolute;
inset: 30px;
/* 等同于top/right/bottom/left:30px，简化写法 */
background: #0002;
border-radius: 10px;
}3. 波浪核心样式（重点）
/* 控制每个span的旋转角度，实现四个方向的波浪 */
.container .box span {
position: absolute;
inset: 0;
/* 占满整个.box容器 */
rotate: calc(var(--i) * 90deg);
/* 按--i值旋转，0°、90°、180°、270°对应四个方向 */
}
/* 上半部分波浪：用径向渐变绘制圆弧 */
.container .box span::before {
content: '';
position: absolute;
bottom: 0;
/* 定位到span底部，对应方块的边缘 */
width: 100%;
height: 15px;
/* radial-gradient绘制圆形渐变：12px的深色圆，13px外透明，形成圆弧 */
background-image: radial-gradient(circle at 10px 15px, #333 12px, transparent 13px);
background-repeat: repeat;
/* 重复背景，形成连续波浪 */
background-size: 40px 20px;
/* 控制波浪的大小和间距 */
animation: animate 0.5s linear infinite;
/* 调用动画，线性、无限循环 */
}
/* 下半部分波浪：补充波浪的另一部分，让形态更完整 */
.container .box span::after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 10px;
/* 反向径向渐变，和before配合形成完整波浪 */
background-image: radial-gradient(circle at 10px -5px, transparent 12px, #333 13px);
background-repeat: repeat;
background-size: 20px 20px;
animation: animate 0.5s linear infinite;
}4. 动画关键帧
@keyframes animate {
0% {
background-position: 0 0;
/* 初始背景位置 */
}
100% {
background-position: 40px 0;
/* 水平偏移背景，形成滚动效果 */
}
}完整源码附录
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 适配移动端，保证响应式效果 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画波浪边缘|快速CSS技巧</title>
<!-- 引入外部样式文件 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 容器：用于摆放两个波浪方块，控制间距 -->
<div class="container">
<!-- 第一个波浪方块，--clr自定义主色调（蓝色） -->
<div class="box" style="--clr: #2196f3">
<!-- 4个span分别对应0°、90°、180°、270°旋转，实现四个方向波浪 -->
<span style="--i: 0;"></span>
<span style="--i: 1;"></span>
<span style="--i: 2;"></span>
<span style="--i: 3;"></span>
</div>
<!-- 第二个波浪方块，--clr自定义主色调（红色） -->
<div class="box" style="--clr: #ff5566">
<span style="--i: 0;"></span>
<span style="--i: 1;"></span>
<span style="--i: 2;"></span>
<span style="--i: 3;"></span>
</div>
</div>
</body>
</html>style.css
/* 全局样式重置：清除默认边距，统一盒模型 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 页面主体样式：居中展示内容，深色背景对比效果 */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
/* 占满视口高度 */
background: #333;
}
/* 方块容器：弹性布局，控制两个方块间距 */
.container {
position: relative;
display: flex;
gap: 25px;
}
/* 波浪方块基础样式：固定尺寸，调用自定义颜色变量 */
.container .box {
position: relative;
width: 360px;
height: 360px;
background: var(--clr);
}
/* 方块内部半透明遮罩：增加视觉层次，inset简化四边内边距 */
.container .box::before {
content: '';
position: absolute;
inset: 30px;
background: #0002;
border-radius: 10px;
}
/* 波浪载体：通过rotate旋转实现四个方向的波浪 */
.container .box span {
position: absolute;
inset: 0;
/* 占满父容器 */
rotate: calc(var(--i) * 90deg);
/* 根据--i值旋转，覆盖四个方向 */
}
/* 波浪上半部分：径向渐变绘制圆弧，重复排列形成连续波浪 */
.container .box span::before {
content: '';
position: absolute;
bottom: 0;
/* 定位到边缘 */
width: 100%;
height: 15px;
/* radial-gradient(circle at 圆心位置, 颜色1 半径, 颜色2 半径) */
background-image: radial-gradient(circle at 10px 15px, #333 12px, transparent 13px);
background-repeat: repeat;
/* 重复背景 */
background-size: 40px 20px;
/* 控制波浪大小 */
animation: animate 0.5s linear infinite;
/* 添带动画 */
}
/* 波浪下半部分：补充波浪形态，让边缘更完整 */
.container .box span::after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 10px;
background-image: radial-gradient(circle at 10px -5px, transparent 12px, #333 13px);
background-repeat: repeat;
background-size: 20px 20px;
animation: animate 0.5s linear infinite;
}
/* 波浪动画：通过背景位置偏移实现滚动效果 */
@keyframes animate {
0% {
background-position: 0 0;
/* 初始位置 */
}
100% {
background-position: 40px 0;
/* 水平偏移，形成滚动 */
}
}结语 & 行动建议
这个波浪边缘动画的核心其实是对
CSS 渐变和背景动画的灵活运用，看似复杂的效果，拆解开来都是基础的 CSS 属性组合。