HTML+CSS脉冲按钮动画故障：外围光晕不显示求助

问题描述 #

我是编程新手，尝试用HTML+CSS实现脉冲按钮效果，但只有按钮本身在脉动，外围的光晕完全不显示。以下是我的代码：

原CSS代码 #

@import "compass/css3";

body,
html {
  height: 100%;
  background: #fff;
}

.container {
  width: 200px;
  height: 100%;
  margin: 0 auto 0;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
  background: #fff;
}

.pulse-button {
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  display: block;
  width: 100px;
  height: 100px;
  font-size: 1.3em;
  font-weight: light;
  font-family: "Trebuchet MS", sans-serif;
  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(#5a99d4, 0.5);
  -webkit-animation: pulse 1.5s infinite;
}
.pulse-button:hover {
  -webkit-animation: none;
}

@-webkit-keyframes pulse {
  0% {
    @include transform(scale(0.9));
  }
  70% {
    @include transform(scale(1));
    box-shadow: 0 0 0 50px rgba(#5a99d4, 0);
  }
  100% {
    @include transform(scale(0.9));
    box-shadow: 0 0 0 0 rgba(#5a99d4, 0);
  }
}

原HTML代码 #

<div class='container'>
  <span class='pulse-button'>pulse</span>
</div> 

问题原因与修复方案 #

核心问题 #

1. 预处理器语法未编译：代码使用了Compass的@include混合宏和Sass的颜色简写语法rgba(#hex, alpha)，如果没有配置预编译环境，浏览器无法直接解析这些语法，导致阴影动画失效。
2. 前缀单一兼容性差：仅用-webkit-前缀，未适配现代浏览器的标准CSS属性，部分环境下动画逻辑无法生效。
3. 无效字体权重值：font-weight: light不是合法CSS值，应使用数字权重（如300）。

修复后的完整代码 #

CSS代码

body,
html {
  height: 100%;
  background: #fff;
}

.container {
  width: 200px;
  height: 100%;
  margin: 0 auto;
  perspective: 1000;
  backface-visibility: hidden;
  background: #fff;
}

.pulse-button {
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  display: block;
  width: 100px;
  height: 100px;
  font-size: 1.3em;
  font-weight: 300;
  font-family: "Trebuchet MS", sans-serif;
  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;
}
.pulse-button:hover {
  animation: none;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
  }
}

HTML代码

<div class='container'>
  <span class='pulse-button'>pulse</span>
</div> 

关键改动说明 #

• 移除预处理器依赖：把@include transform()替换为标准CSS的transform属性，将rgba(#5a99d4, 0.5)转为浏览器可直接解析的rgba(90, 153, 212, 0.5)。
• 统一使用标准属性：删除仅有的-webkit-前缀，改用现代浏览器支持的标准animation和transform属性，保证多浏览器兼容。
• 修正字体权重：将font-weight: light改为font-weight: 300，符合CSS有效值规范。

内容的提问来源于stack exchange，提问作者Mikay