获得投影以进一步传播

Question

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

＆＃13;

＆＃13;

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));
    }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

没有直接替代传播属性，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);
  }
}

然后将其应用于背景图像。您需要确保两个图像完全匹配大小或重叠看起来很糟糕（如上面的演示）。