以下是一份逐步拆解的中文教程，帮助你理解并复刻这个“脉冲（Pulse）”动画的示例。它利用 box-shadow 和关键帧（keyframes）实现一个类似水波扩散的动画效果，同时保持中央笔墨“Pulse”不动。
第 0 步：项目结构
- pulsar-effect/
- ├─ index.html
- └─ style.css
- index.html：包含页面基本结构和“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">
- <!-- 这是脉冲动画的核心元素，显示“Pulse”文本 -->
- <div class="pulse">Pulse</div>
- </div>
- </body>
- </html>
- <div class="center">：放置一个容器用于在页面中央摆放内容。
- <div class="pulse">
 ulse</div>：真正做脉冲动画的元素，它本身是一个圆形且带有笔墨“Pulse”。
第 2 步：页面配景与居中结构
在 style.css 中，先看基础样式和 .center 结构：
- 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 的样式：
- .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 在不同时刻呈现不同巨细与透明度的阴影，从而产生类似水波扩散的效果。完整代码如下：
- @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: [偏移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 扩散半径与透明度，形成“水波脉冲”。
将这些思路融会贯通，你就能在本身项目中制作出各种炫酷的脉冲、光晕或水波动画。祝你创作愉快！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
