html - 在滤镜上应用 CSS3 Transitions

Question

我有一个 css3 过滤器，我希望从一个 Angular 落过渡到另一个 Angular 落，而不是跨板

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

我在下面尝试过，但它全面改变了。有什么方法可以让我从一个 Angular 落过渡到另一个 Angular 落

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

Answer 1

尽管 filter 可以像您展示的那样进行动画处理，但如果不复制内容并另外使用 mask ，就不可能从一个 Angular 过渡到另一个 Angular 。在某些情况下，您可以使用伪元素、子元素或兄弟元素来做到这一点。

我希望我可以只使用一个没有内容的伪元素，将它放在原始元素上，然后将过滤器应用于伪元素，它会影响下面的原始元素，但遗憾的是不是这样的。这将允许灰度在任何方向、大小或旋转方向上移动，而不会复制内容，但显然它只适用于它所在的元素，而不适用于下面的元素(这是可以理解的，因为它浏览器很难判断它究竟应该重新着色什么)。

关于解决方案，从一个 Angular 过渡到另一个 Angular 的唯一方法是按照 vals 的建议使用掩码。这仍然需要将灰度版本放置在原始版本下方，当它悬停在上方时显示它

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