css - 图像元素上的Animation/Transitions SVG滤镜

Question

嘿，我在您的网站上显示了很多业务图标。我想添加与他们相关的超酷动画。我想过图标会一直保持灰色，直到您将它们悬停为止。然后它们慢慢变色。首先，我用filter: grayscale(100%)达到了这种效果。但是，这些图标具有不同的灰色阴影，看起来很糟糕。然后我发现了一个svg过滤器，如下所示。不幸的是，我不知道如何为该滤镜设置过渡效果的动画。因此，我正在寻求帮助以使此动画正常工作或以其他方式实现这种效果。

img {
  -webkit-filter: url(#gray-filter);
  filter: url(#gray-filter);
  transition: filter 2s;
  -webkit-transition: filter 2s;
}
img:hover {
  -webkit-filter: none;
  filter: none;
}

<svg style="position: absolute; width: 140px; height: 140px;">
  <defs>
    <filter id="gray-filter">
      <feColorMatrix type="luminanceToAlpha" result="L2A"></feColorMatrix>
      <feFlood flood-color="#b3b4bd" result="colorfield"></feFlood>
      <feBlend mode="multiply" in="L2A" in2="colorfield"></feBlend>
      <feComposite operator="in" in2="SourceGraphic"></feComposite>
    </filter>
  </defs>
</svg>
<img src="http://iconshow.me/media/images/logo/brand-logo-icon/png/128/cocacola-128.png" />

Answer 1

这是获得所需效果的一种方法。

我正在使用图像的两个副本。底部是灰色的。当您悬停时，顶部的未过滤顶部会逐渐消失。

img.grey {
  -webkit-filter: url(#gray-filter);
  filter: url(#gray-filter);
  opacity: 1;
  transition: filter 2s;
  -webkit-transition: filter 2s;
}

img.real {
  opacity: 0;
  transition: opacity 2s;
  -webkit-transition: opacity 2s;
}

img.real:hover {
  opacity: 1;
  transition: opacity 2s;
  -webkit-transition: opacity 2s;
}

.fader {
  position: relative;
}

.fader img {
  position: absolute;
}

<svg style="position: absolute; width: 140px; height: 140px;">
  <defs>
    <filter id="gray-filter">
      <feColorMatrix type="luminanceToAlpha" result="L2A"></feColorMatrix>
      <feFlood flood-color="#b3b4bd" result="colorfield"></feFlood>
      <feBlend mode="multiply" in="L2A" in2="colorfield"></feBlend>
      <feComposite operator="in" in2="SourceGraphic"></feComposite>
    </filter>
  </defs>
</svg>
<div class="fader">
  <img class="grey" src="http://iconshow.me/media/images/logo/brand-logo-icon/png/128/cocacola-128.png" />
  <img class="real" src="http://iconshow.me/media/images/logo/brand-logo-icon/png/128/cocacola-128.png" />
</div>