【开源宝藏】30天学会CSS - DAY4 第四课 CSS 关键帧

以下是一份逐步拆解 的中文教程，帮助你理解并复刻这个"脉冲（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] [模糊半径] [扩散半径] [颜色];   /* 第二个阴影 */

在这里，每个时间点都有两个阴影 ：
1. 第一个阴影：0 0 0 [radius] rgba(55, 209, 201, alpha)
2. 第二个阴影：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 扩散半径与透明度，形成"水波脉冲"。

将这些思路融会贯通，你就能在自己项目中制作出各种炫酷的脉冲、光晕或水波动画。祝你创作愉快！