本文手把手教你用标准 CSS 实现一个居中、带外发光脉冲动画的圆形按钮，修复常见兼容性问题（如废弃的 -webkit- 前缀和 SCSS 语法），并采用现代布局方案（Flexbox）替代过时的 position + margin 居中技巧。
本文手把手教你用标准 css 实现一个居中、带外发光脉冲动画的圆形按钮，修复常见兼容性问题（如废弃的 `-webkit-` 前缀和 scss 语法），并采用现代布局方案（flexbox）替代过时的 `position + margin` 居中技巧。
要实现一个真正“呼吸感”十足的脉冲按钮（即按钮本体 + 外围光晕同步缩放与扩散），关键在于动画逻辑的协同设计与现代 CSS 规范的正确使用。你原始代码的核心问题并非逻辑错误，而是混入了已淘汰的语法：@-webkit-keyframes、@include transform()（Sass 指令）以及不安全的 height: 100% 布局方式——这些会导致动画失效、样式丢失或布局塌陷。
下面是一份精简、可直接运行的完整解决方案：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>CSS 脉冲按钮教程</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #f9f9f9;
min-height: 100vh; /* 推荐用 vh 替代 height: 100% */
font-family: "Trebuchet MS", sans-serif;
}
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh; /* 全高容器，响应式安全 */
padding: 20px;
}
.pulse-button {
width: 100px;
height: 100px;
font-size: 1.3em;
font-weight: 300;
text-transform: uppercase;
text-align: center;
line-height: 100px;
letter-spacing: -1px;
color: white;
border: none;
border-radius: 50%;
background: #5a99d4;
cursor: pointer;
/* 关键：初始阴影为透明扩散环 */
box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
animation: pulse 1.5s infinite ease-in-out;
/* 可选：添加过渡增强悬停反馈 */
transition: transform 0.2s ease;
}
.pulse-button:hover {
animation: none; /* 悬停时暂停动画 */
transform: scale(1.05); /* 微调强化交互感 */
}
@keyframes pulse {
0% {
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
}
50% {
transform: scale(1);
box-shadow: 0 0 0 25px rgba(90, 153, 212, 0.3);
}
100% {
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
}
}
</style>
</head>
<body>
<div class="container">
<button class="pulse-button">pulse</button>
</div>
</body>
</html>✅ 关键改进说明：
- ✅ 移除所有厂商前缀：@keyframes 和 animation 已全平台支持（Chrome 43+/Firefox 16+/Safari 9+/Edge 12+），无需 -webkit-；
- ✅ 修正 transform 语法：将 @include transform(...) 替换为标准 transform: scale(...)；
- ✅ 现代化居中方案：.container 使用 display: flex + align-items/justify-content: center，简洁可靠，告别 position: relative + 负 margin 的脆弱写法；
- ✅ 语义化优化：将 <span> 改为 <button>，提升可访问性（支持键盘聚焦、屏幕阅读器识别）；
- ✅ 动画节奏优化：调整关键帧至 0% → 50% → 100%，使光晕扩散更自然；ease-in-out 缓动让缩放更柔和。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免在 body 或 html 上设置 height: 100% —— 它易引发高度计算异常，尤其在嵌套 Flex/Grid 布局中；优先使用 min-height: 100vh；
- 若需兼容极老浏览器（如 IE11），需补充 -ms- 前缀并降级为 transform: scale() + filter: blur() 模拟阴影（但本文不推荐为旧版牺牲现代体验）；
- box-shadow 的 rgba() 值中建议使用十进制颜色（如 rgba(90, 153, 212, 0.5)）而非 Sass 十六进制写法（rgba(#5a99d4, 0.5)），确保原生 CSS 兼容性。
掌握这个模式后，你可轻松扩展：更换颜色、调整 animation-duration 控制快慢、叠加多层 box-shadow 实现霓虹光效，甚至结合 :focus-visible 增强键盘导航体验。脉冲动画的本质，是视觉节奏与用户预期的精准对齐——而这一切，始于干净、标准、语义清晰的 CSS。
