【开源宝藏】30天学会CSS - DAY5 第五课脉冲动画

以下是一个完整的渐进式教程，拆解如何用 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 可扩大脉冲半径；还可改变关键帧中各个百分比节点来控制时机。
只要一个环：可将双重阴影改为一个，脉冲更简洁。