CSS ::before伪元素的pulse动画无法正常工作

你的代码有三个关键问题导致动画无效果：

• @keyframes语法错误：不能在@keyframes前加.box选择器，@keyframes是独立的CSS规则，无需绑定到特定类。
• 伪元素定位错误：.box未设置position: relative，导致伪元素的absolute定位相对于整个文档而非.box，覆盖层不在图片上方。
• 伪元素无可见背景：伪元素仅设置透明度变化但无背景色，即使透明度改变也无法被感知，需添加背景层实现脉冲视觉效果。

修改后的完整代码 #

CSS #

#container  {
  background-color: orange;
  display: flex;
}

.box  {
  background-image: url(https://cdn.britannica.com/16/234216-050-C66F8665/beagle-hound-dog.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100px;
  height: 100px;
  margin: 10px;
  position: relative; /* 让伪元素相对自身定位 */
}

.box::before  {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background-color: black; /* 添加背景层，实现透明度变化的视觉效果 */
  animation: pulse 2.5s infinite;
}

/* 修正keyframes定义，去掉多余的.box前缀 */
@keyframes pulse  {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5; /* 调高透明度值，让效果更明显 */
  }
  100% {
    opacity: 0;
  }
}

HTML #

<div id='container'>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>

修改后，每个图片上方会出现黑色脉冲覆盖层，透明度在0到0.5之间循环变化，即可看到预期的脉冲效果。

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