css3过渡效果 渐变自定义阴影 (用背景实现自定义阴影)

记录一下

/* css */
.contain {
  position: relative;
}
.contain span::after{
  content:'';
  position: absolute;
  /* 放大背景 */
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  /* 模糊滤镜 */
  filter: blur(10px);
  transition: all 1s;
  background: rgba(0, 255, 106, 0);
  z-index: -1;
}
.contain span:hover::after{
  transition: all 0.3s;
  background: rgba(0, 255, 106, 0.7);
}

<span class="contain">
  <span class="active">这是一段测试文字</span>
</span>

灵感来源
b站转载看见的