如何使用 CSS 在悬停时制作平滑的灰度答案

【问题标题】：how to make smooth grayscale on hover using CSS如何使用 CSS 在悬停时制作平滑的灰度
【发布时间】：2016-04-22 18:06:53
【问题描述】：

我的网站上有徽标，它在悬停时是灰度的，我希望它的颜色平滑。它正在工作，但并不顺利。我正在使用 CSS 过渡。

这是我的代码

<img alt="TT ltd logo" src="./img/tt-logo.png" class="tt-logo" />

   <style>
    img.tt-logo {
      filter: grayscale(1);
      transition: grayscale 0.5s;
    }

    img.tt-logo:hover {
      filter: grayscale(0);
    }
   </style>

【问题讨论】：

标签： css css-transitions grayscale

【解决方案1】：

尝试这样做：

 img.tt-logo {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.5s ease;
 }

 img.tt-logo:hover {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
 }

每张图片都有自己的alt，不用img.class也可以使用：

 img[alt="TT ltd logo"] {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.5s ease;
 }

 img[alt="TT ltd logo"]:hover {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
 }

在这种情况下，class 是额外的

【讨论】：

谢谢 :) 它可以工作，但我仍然很困惑，为什么所有工作都有效但灰度无效？？
您需要为属性设置动画。在这种情况下，属性是 filter（或 -webkit-filter）。不是graycase，那是属性的值
@vals 非常感谢我明白了 :)
-moz-filter 不存在。您可以安全地删除它，因为 Firefox 使用 -filter: developer.mozilla.org/en-US/docs/Web/CSS/filter

【解决方案2】：

动画过滤器需要大量计算，并且可能会损害某些浏览器的性能。

您可以通过为灰度图像的opacity 设置动画以在其下方显示全彩图像来获得更好的性能。

Here's an example.

【讨论】：

我没听懂你能不能举个例子？

【解决方案3】：

在浏览器的当前状态下，您可以参考下面的示例，简短而简单。现在的现代浏览器支持灰度 CSS 属性，如果您只转换一个属性，最好参考一个属性而不是所有属性。

img {
    grayscale: 1;
    transition: filter .23s ease-in-out;
}

img:hover {
    grayscale: 0;
}

来源：

【讨论】：