Question

我正在开设一个网页，如果你将鼠标悬停在图片上，它就会降解。它适用于Chrome和IE。但是，我无法过渡到FF工作，而且它在Opera中根本没有去饱和。

这是我的代码：

<!DOCTYPE html>

<head>      
<style type="text/css">
    img:hover {         
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.0\'/></filter></svg>#grayscale"); /* Firefox */
        filter: gray; /* IE */
        -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        -webkit-filter: grayscale(1); /* Webkit */}

    img {           
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -o-filter: grayscale(0);
        filter: none;
        filter: grayscale(0);}

    img.transition {
        -moz-transition: all 0.5s ease-in-out; /* FF */
        -o-transition: all 0.5s ease-in-out; /* Opera 10.5 */
        -webkit-transition: all 0.5s ease-in-out; /* Webkit */
        transition: all 0.5s ease-in-out;}
</style>
</head>

<html>
<body>
    <img src="http://www.wallpapershd.biz/wallpapers/2012/12/Cardinal-Bird-1024x1280.jpg" width="500" class="transition" />
</body>
</html>

我见过类似的问题，但我是初学者，所以答案有点抽象;你不必自己提供代码，但请指出一些我能理解的详细答案。如果有人能帮助我，那就太好了。

Answer 1

为什么不使用从红色到灰色的简单颜色过渡？

SVG过滤器，在Firefox中过渡

1 个答案: