以下是一个完整的渐进式教程，拆解如何用 HTML + CSS 构建“Pulsar”水波脉冲动画。通过阅读，你将理解每个核心属性与关键帧如何配合，让一个小圆不断散发动态波纹，并且文字始终停留在圆心。
第 0 步：项目概览
文件结构示例如下：
pulsar-effect/
├─ index.html
└─ style.css
index.html：页面主体，包含一个居中的<div>显示“Pulse”文字。style.css：用来设置背景、圆形外观、关键帧动画等。
第 1 步：编写基础 HTML
打开/新建 index.html，编写最简洁的页面骨架：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Milena Carecho">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulsar</title>
<!-- 关联CSS文件 -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- 用于居中元素 -->
<div class="center">
<!-- 核心 pulsar 动画元素 -->
<div class="pulse">Pulse</div>
</div>
</body>
</html>
代码说明
<div class="center">：将子元素放在页面正中央的辅助容器。<div class="pulse">Pulse</div>：一个圆形块，用来显示文字“Pulse”并附加脉冲动画。
第 2 步：基础CSS，设置背景与居中
新建或编辑 style.css，先设置页面外观与 .center 容器布局：
body {
margin: 0;
padding: 0;
background: #262626; /* 深灰色背景，让动画更突出 */
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 去除 body 默认间距：保证背景全屏。
- 深灰色背景：凸显后面青绿色脉冲效果。
- 绝对定位 +
transform: translate：将.center及其子元素完美居中在可视区。
第 3 步：打造圆形 + 文字
在 .pulse 上定义尺寸、颜色、字体等，形成一个圆形按钮式的视觉：
.pulse {
width: 100px;
height: 100px;
background: #177c80; /* 青绿色背景 */
border-radius: 50%; /* 圆形 */
color: #fff; /* 白色文字 */
font-size: 20px; /* 字号适当放大 */
text-align: center; /* 文本居中(横向) */
line-height: 100px; /* 文本居中(纵向) */
font-family: verdana;
text-transform: uppercase; /* 文字大写 */
/* 调用关键帧动画 */
animation: animate 3s linear infinite;
}
关键知识点
border-radius: 50%：将 100×100 的方块变成完美圆形。- 文字居中：使用
line-height与元素高度相等，再配合text-align: center;。 - 动画触发：
animation: animate 3s linear infinite;告诉浏览器用名为animate的关键帧，3秒一轮，不断重复 (infinite)。
第 4 步：定义关键帧动画
真正的脉冲效果是通过 box-shadow 在不同时刻的扩散和透明度变化来实现。把下面的代码加到 style.css：
@keyframes animate {
0% {
box-shadow:
0 0 0 0 rgba(55, 209, 201, 0.7),
0 0 0 0 rgba(24, 153, 104, 0.7);
}
40% {
box-shadow:
0 0 0 50px rgba(55, 209, 201, 0),
0 0 0 0 rgba(55, 209, 201, 0.7);
}
80% {
box-shadow:
0 0 0 50px rgba(55, 209, 201, 0),
0 0 0 30px rgba(55, 209, 201, 0);
}
100% {
box-shadow:
0 0 0 0 rgba(55, 209, 201, 0),
0 0 0 30px rgba(55, 209, 201, 0);
}
}
多重 box-shadow
- 每一帧都定义了两个阴影，用逗号分隔。
0 0 0 50px rgba(...)中的 第四个值（“50px”）是扩散半径（spread-radius），用于制造类似扩张的环。rgba(..., 0.7)与rgba(..., 0)表示不同透明度，使外扩后渐渐消失。
动画阶段解读
0%：两个阴影都在半径0处，且透明度 0.7（略微可见）。40%：第一个阴影扩散到 50px，并且透明度变0（消失于外侧），第二个阴影还在半径0但保持 0.7。80%：第一个阴影持续在 50px 且不可见，第二个阴影扩散到 30px 同时也逐渐透明。100%：两个阴影都回到0半径且透明度0，准备进入下个循环。
通过在不同时刻让两个环先后扩散、变淡，呈现出脉冲或水波一圈圈向外扩散的效果。
第 5 步：测试与微调
现在，打开浏览器查看 index.html，你会看到：
- 网页以深灰色为背景。
- 中央有一枚青绿色的小圆，内写“Pulse”。
- 该圆周围不断出现扩散且渐隐的阴影环，形成“脉冲”动画。
如需调整：
- 动画周期：在
.pulse里把3s改成你想要的时长，如2s或5s。 - 颜色 & 透明度：改动
rgba(55, 209, 201, 0.7)和rgba(24, 153, 104, 0.7)，可用更多颜色，或修改透明度营造更微妙的光晕感。 - 扩散尺寸：
0 0 0 50px→0 0 0 80px可扩大脉冲半径；还可改变关键帧中各个百分比节点来控制时机。 - 只要一个环：可将双重阴影改为一个，脉冲更简洁。
总结
通过本教程的分步骤拆解，你学习到了：
- 如何居中页面元素（
position: absolute; transform: translate(-50%, -50%)）。 - 使用 CSS 生成圆形（
width=height; border-radius=50%）。 - 使用多重
box-shadow制造外扩“水波”效果。 - 关键帧配合动画：在不同阶段改动
box-shadow的扩散半径与透明度，实现连续的“脉冲”循环。
不需要任何 JavaScript，就能完成一个简洁又炫酷的“Pulsar”水波脉冲动画！你可以将其应用在页面加载指示、按钮交互或其他创意场景中。祝你学习愉快、创意无限！