logo标签列表

如何使用CSS实现平滑的灰度悬停效果

csscss-transitionsgrayscale
18

我的网站上有一个Logo，当鼠标悬停时它会变成灰色，我想让它平滑过渡到彩色。虽然它现在可以工作，但是效果不够平滑。我正在使用CSS transition。

这是我的代码

<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>
3个回答
33
尝试这样做：
 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是多余的。
谢谢 :) 它可以工作，但我仍然困惑为什么所有的东西都可以工作，但灰度图像却不行？ - Maria
你需要给属性添加动画效果。在这种情况下，该属性是filter（或-webkit-filter）。不是graycase，那是该属性的值。 - vals
@vals 非常感谢，我明白了 :) - Maria
“-moz-filter”不存在。您可以安全地将其删除，因为Firefox使用“-filter”：https://developer.mozilla.org/en-US/docs/Web/CSS/filter - Hannes Schneidermayer
10

在一些浏览器中，为筛选器添加动画效果需要大量计算，这可能会影响性能。

通过将灰度图像的opacity属性进行动画处理，以显示其下面的全彩色图像，可以获得更好的性能。

这是一个例子。

我没听懂你的意思，能否请你举个例子？ - Maria
5

在当前浏览器的状态下，你可以选择以下简短的示例。现代浏览器现在支持灰度CSS属性，如果你只想过渡一个属性，最好只引用一个属性而不是全部属性。

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

img:hover {
    grayscale: 0;
}

参考资料：

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接