【开源宝藏】30天学会CSS - DAY4 第四课 CSS 关键帧
以下是一份逐步拆解的中文教程，帮助你理解并复刻这个“脉冲（Pulse）”动画的示例。它利用 box-shadow 和关键帧（keyframes）实现一个类似水波扩散的动画效果，同时保持中央笔墨“Pulse”不动。https://i-blog.csdnimg.cn/direct/51c8357ad05c41bf9badca5bd89b7dc5.gif
第 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">Pulse</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 属性可以指定多个影子，以逗号分隔。例如：box-shadow: [偏移x] [偏移y] [模糊半径] [扩散半径] [颜色], /* 第一个阴影 */
[偏移x] [偏移y] [模糊半径] [扩散半径] [颜色]; /* 第二个阴影 */
[*]在这里，每个时间点都有两个阴影：
[*]第一个阴影：0 0 0 rgba(55, 209, 201, alpha)
[*]第二个阴影：0 0 0 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企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]