Question

我有一个css3过滤器，我希望从一个角落转换到另一个角落而不是跨越

div {-webkit-filter: grayscale(1); }
div:hover { -webkit-filter: grayscale(0); }

我在下面试过，但它全面改变了。有什么方法可以从一个角落转换到另一个角落

-webkit-transition: -webkit-filter 1s;

Answer 1

尽管过滤器在您显示时是可动画的，但如果不复制内容并使用蒙版，则无法从一个角落过渡到另一个角落。您可以在某些情况下使用伪元素，子元素或兄弟元素。

我希望我可以使用没有内容的伪元素，将它放在原始元素上，并将滤镜应用于伪元素，它会影响下面的原始元素，但遗憾的是不是这样的。这将允许灰度的移动在你想要的任何方向，大小或旋转上进行而不复制内容，但显然它只适用于它所在的元素，而不是下面的元素（这是可以理解的，因为它'浏览器难以确定应该重新着色的内容。

在解决方案中，从一个角落转换到另一个角落的唯一方法是使用掩码作为vals建议。这仍然需要将灰度版本放置在原始版本之下，当它悬停在

之上时将其显示出来

过滤器在FireFox或IE中无效，因为CSS filters don't have much support。另一方面，用于HTML的SVG过滤器在SVG better support上有have even better support和SVG过滤器。如果你可以使用这些，那就像目前更好的方法。如上所述，使用SVG过滤器可能还允许您将过滤器从一侧移动到另一侧

Answer 2

我接受了扎克的回答并补充道：

.filtered:before {
    transition: 2s -webkit-mask-size;
    -webkit-mask-position: top left;
    -webkit-mask-size: 0px 0px;
    -webkit-mask-image: linear-gradient(131deg, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 40%); 
    -webkit-mask-repeat: no-repeat;
}
.filtered:hover:before {
    -webkit-mask-size: 600px 600px;
}

现在左上角有擦拭效果。

demo

请注意，我们仍然没有为过滤器本身设置动画，而是应用过滤器的图层的透明度（在屏蔽情况下）。

另请注意，您可以使用很多场景，创建不同的渐变来进行遮罩。

此外，效果几乎看不到，所以我在灰度上添加了一个亮度系数（仅用于演示）

当然，所有这些仅限于webkit

在过滤器上应用CSS3过渡

2 个答案: