以下是一份逐步拆解 的中文教程，帮助你理解并复刻这个"脉冲（Pulse）"动画的示例。它利用 box-shadow 和关键帧（keyframes）实现一个类似水波扩散的动画效果，同时保持中心文字"Pulse"不动。
第 0 步：项目结构
pulsar-effect/
├─ index.html
└─ style.css- index.html：包含页面基本结构和"Pulse"文字的容器。
- style.css：定义页面背景、元素样式，以及脉冲动画关键帧。
第 1 步：HTML 基础结构
先看 index.html 的主要内容（简化注释）：
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">
<!-- 这是脉冲动画的核心元素，显示"Pulse"文本 -->
<div class="pulse">Pulse</div>
</div>
</body>
</html>代码说明
<div class="center">：放置一个容器用于在页面中央摆放内容。<div class="pulse">Pulse</div>：真正做脉冲动画的元素，它本身是一个圆形且带有文字"Pulse"。
第 2 步：页面背景与居中布局
在 style.css 中，先看基础样式和 .center 布局：
css
body {
margin: 0;
padding: 0;
background: #262626; /* 深灰背景 */
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}解析
body- 去掉默认边距，使得页面内容可完整覆盖；
background: #262626;：赋予一个深色背景，方便凸显后续脉冲动画。
.center- 通过
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);，将子元素（.pulse）精确居中显示于可视区域。
- 通过
第 3 步：圆形元素与文字
接着看看 .pulse 的样式：
css
.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;
}关键点
- 宽高 & 圆形
width: 100px; height: 100px; border-radius: 50%;让元素成为一个直径 100px 的圆形。
- 背景 & 文字
background: #177c80; color: #fff;：填充颜色为青绿色，文本为白色。text-align: center; line-height: 100px;：让"Pulse"文字在圆心垂直居中。text-transform: uppercase;：自动把字母变成大写。
- 动画调用
animation: animate 3s linear infinite;：调用名为animate的关键帧，3 秒一个周期，线性播放，并无限循环。
第 4 步：关键帧动画（box-shadow 扩散）
真正让这个圆呈现"脉冲"效果的是 @keyframes animate。它利用多重 box-shadow 在不同时刻呈现不同大小与透明度的阴影，从而产生类似水波扩散的效果。完整代码如下：
css
@keyframes animate {
0% {
box-shadow:
0 0 0 0 rgba(55, 209, 201, 0.7), /* 第1个阴影 */
0 0 0 0 rgba(24, 153, 104, 0.7); /* 第2个阴影 */
}
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 多重设置
-
box-shadow属性可以指定多个影子，以逗号分隔。例如：box-shadow: [偏移x] [偏移y] [模糊半径] [扩散半径] [颜色], /* 第一个阴影 */ [偏移x] [偏移y] [模糊半径] [扩散半径] [颜色]; /* 第二个阴影 */ -
在这里，每个时间点都有两个阴影 ：
- 第一个阴影：
0 0 0 [radius] rgba(55, 209, 201, alpha) - 第二个阴影：
0 0 0 [radius] rgba(55, 209, 201, alpha)
- 都使用
0 0 0 ...代表不偏移、不模糊，只是用扩散半径spread去制造环形效果。
- 第一个阴影：
关键帧细节
0%：两个阴影的扩散半径都为 0，颜色有一定透明度 (0.7)。相当于刚开始，脉冲环还在圆心处。40%：- 第一个阴影扩散到了
50px，透明度变为 0（rgba(..., 0)），说明这个环已经"外扩变淡"； - 第二个阴影依然是半径 0，保持原有透明度
0.7。 - 这样，第一个环在 0-40%阶段向外扩散，同时第二环还没开始扩散。
- 第一个阴影扩散到了
80%：- 第一个阴影保持
50px且透明度 0； - 第二个阴影则开始扩散到
30px并透明度也逐渐变 0。 - 显示第二个脉冲"接力"扩散。
- 第一个阴影保持
100%：- 两个阴影都回到半径 0 并透明度 0，准备下一轮循环。
透过这两个环先后有序地扩散并消失，就形成了连续脉冲 或双波水纹的效果。
第 5 步：控制动画速度与效果
若你想做更多调整：
- 动画周期 ：
- 在
.pulse { animation: animate 3s linear infinite; }中，将3s改为更短或更长。比如2s就会更频繁跳动，5s则显得更悠缓。
- 在
- 缓动函数 ：
- 将
linear改成ease,ease-in-out等，会让扩散速度在前后渐变，而非匀速。
- 将
- 颜色 ：
- 这里用了
rgba(55, 209, 201, ...)和rgba(24, 153, 104, ...)。你可换成喜欢的颜色，例如rgba(255, 0, 0, 0.5)等。
- 这里用了
- 环数量 ：
- 当前是两个阴影，你可以继续添加第三个阴影，或只用一个阴影，以调试不同的脉冲频率和层次。
- 圆的大小 ：
.pulse { width: 100px; height: 100px; }改大一些，如 150×150，能让脉冲有更大视觉。别忘了配合行高、字体大小调整文字位置。
最终效果回顾
- 网页中央有一个青绿色圆形，内写"Pulse"。
- 圆心处不断生成两个透明度渐弱、半径渐增的环，模拟"脉冲"或"水波"向外扩散的视觉。
- 整个动画以 3 秒一轮无限循环，背景为深灰，突出青绿脉冲效果。
通过该逐步拆解，你可以理解以下关键知识点：
- 绝对定位 + transform 实现元素在页面中央。
- border-radius + background 创造圆形元素。
- box-shadow 的 多重阴影 技巧，让同一元素同时具备多个环形阴影并随时间渐变。
- 关键帧 中的
0% -> 100%设置不同的box-shadow扩散半径与透明度，形成"水波脉冲"。
将这些思路融会贯通，你就能在自己项目中制作出各种炫酷的脉冲、光晕或水波动画。祝你创作愉快！