如何使用 CSS 在悬停时平滑灰度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34840001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make smooth grayscale on hover using CSS
提问by Maria
I have logo in my website, it is grayscaled on hover i want it to be colored smoothly. it is working but not smoothly. i am using CSS transition.
我的网站上有徽标，悬停时它是灰度的，我希望它的颜色平滑。它正在工作，但并不顺利。我正在使用 CSS 过渡。
This is my code
这是我的代码
<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>
回答by Igor Ivancha
Try do it this way:
尝试这样做：
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%);
}
and every image has its own alt, you can use it without using img.class:
并且每个图像都有自己的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%);
}
in this case classis extra
在这种情况下class是额外的
回答by Rafi
Animating a filter takes a lot of computation and might hurt performance in some browsers.
动画过滤器需要大量计算，并且可能会影响某些浏览器的性能。
You can get better performance by animating the opacityof a grayscale image to reveal a full-color image beneath it.
您可以通过opacity为灰度图像设置动画以显示其下方的全色图像来获得更好的性能。
