为带filter属性的伪元素设置transition过渡效果失效如何解决

开发者阿泽

2026-9-23

问题根因

你当前的::after伪元素仅在父元素携带.mask类时才会被创建，CSS过渡无法作用于从不存在到突然生成的元素
transition属性需要绑定在一直存在的目标元素（此处为::after伪元素）上，绑定在父元素不会作用于伪元素

修复方案

调整CSS规则，提前定义默认状态的伪元素，将过渡属性绑定在伪元素本身，仅通过.mask类切换发光相关的属性值即可。同时需要给父元素加position: relative避免伪元素定位偏移。

修改后的CSS代码

.img {
  height: fit-content;
  width: fit-content;
  display: block;
  /* 新增：让伪元素相对于当前容器定位 */
  position: relative;
}

.go {
  height: 400px;
  width: 400px;
  background: url("https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg");
  background-size: initial;
}

/* 新增：默认状态的伪元素定义 */
.img::after {
  content: "";
  width: inherit;
  height: inherit;
  position: absolute;
  /* 新增：对齐父容器位置 */
  top: 0;
  left: 0;
  background: inherit;
  background-position: center center;
  /* 默认无发光效果 */
  filter: blur(0) saturate(1);
  z-index: -1;
  /* 过渡属性绑定在伪元素本身 */
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
}

/* 仅修改发光状态的属性 */
.mask::after {
  filter: blur(10px) saturate(3);
}