img:hover{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
这会将图像从彩色转换为灰度。但我想用动画效果。我可以用 jQuery 做到这一点。但我需要纯 css 解决方案。
那么,如何在鼠标悬停在图片上时产生动画效果呢?
更新
我试过这个但在 firefox brwoser 中不起作用,甚至在 IE11 中它也不是灰度!
filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
filter: grayscale(100%);
transition : filter 500ms linear;
-webkit-transition: -webkit-filter 500ms linear;
-moz-transition: -moz-filter 500ms linear;
最佳答案
您应该可以通过 transition
示例
img:hover {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
transition : filter 500ms linear;
-webkit-transition: -webkit-filter 500ms linear;
-moz-transition: -moz-filter 500ms linear;
}
关于css - 如何使用CSS为过滤后的图像制作动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22094625/