css - 获取阴影以进一步传播

Question

我想让我的标志发光一点。为此，我正在使用 -webkit-filter: drop-shadow(0 0 8px rgba(255, 3, 17, 0.8)。问题是大多数浏览器不支持第四个值这是传播的。那么如何在没有传播值的情况下使 drop-shadow 变大？

img {
    height: auto;
    width: 200px;
    margin-right: 2vw;
    animation: logo-glow 2s infinite alternate-reverse;
}

@keyframes logo-glow{
    0% {
        -webkit-filter: drop-shadow(0 0 15px rgba(255, 3, 17, 0.8));
    }
    100% {
        -webkit-filter: drop-shadow(0px 0px 1px rgba(64, 4, 0, 0.87));
    }
}

<img src="http://www.tdcdkhd.com/wp-content/uploads/2018/03/logo.png">

这是我要在我的网页上使用的图片:

Answer 1

spread 属性没有直接的替代方案，isn't actually part of the standard .可以根据 CSS3 filter: drop-shadow spread property alternatives 使用 SVG 过滤器.否则可能会在另一张图片之上使用一张图片，use transforms to grow the background ，但我不确定这是否是您想要的效果。

@keyframes logo-grow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

然后将其应用于背景图像。您需要确保两张图片在大小方面完全匹配，否则重叠看起来会很糟糕(如上面的演示所示)。