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动画来显示其下方的全彩色图像，可以获得更好的性能。

Here's an example.

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

2 个答案: