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

Question

我的网站上有徽标，悬停时它是灰度的，我希望它能平滑地着色。它正在工作但并不顺利。我正在使用 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>

Answer 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 是额外的

Answer 2

动画滤镜需要大量计算，并且可能会影响某些浏览器的性能。

您可以通过动画化灰度图像的 opacity 以显示其下方的 full-color 图像来获得更好的性能。

Here's an example.

Answer 3

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

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

img:hover {
    grayscale: 0;
}

来源：

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

how to make smooth grayscale on hover using CSS

css

grayscale

css-transitions