如何使用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进行动画处理以显示其下方的全彩图像，可以获得更好的性能。

下面是一个示例。

Answer 3

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

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

来源：

• 可动画的 CSS 属性
• 灰度属性
• 过渡时序