在过滤器上应用CSS3转换

2018-06-28 04:00:09

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

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

我在下面尝试，但它全面改变。有什么办法可以从一个角落转换到另一个角落吗？

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

我已经采取了扎克答案，并补充说：

.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;
}

现在左上角有一个擦拭效果。

演示

请注意，我们不是自己动画过滤器，而是应用过滤器的图层的透明度（如果是遮罩）。

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

此外，效果几乎不可见，所以我在灰度级中添加了亮度因子（仅用于演示）

当然，所有这些仅限于webkit

虽然过滤器在您展示的时候具有动画效果，但不可能从一个角落转换到另一个角落，而无需复制内容并使用蒙版。您可以在某些情况下使用伪元素，子元素或兄弟元素。

我希望我可以只使用没有内容的伪元素，将它放在原始元素上，并将过滤器应用到伪元素，并且会影响原始的下面，但可悲的是，情况并非如此。这将允许灰度的移动沿任何方向，大小或旋转进行，而不会复制内容，但显然它只适用于它所在的元素，而不是下面的元素（这是可以理解的，因为它可以理解， d浏览器难以确定它应该重新着色）。

在解决方案中，从一个角落转换到另一个角落的唯一方法是使用一个面值作为vals的建议。这仍然要求将灰度版本放置在原稿的下方，以便在其悬停时显示它

过滤器在FireFox或IE中不起作用，因为CSS过滤器没有太多支持。另一方面，用于HTML的SVG过滤器具有更好的支持，而SVG上的SVG过滤器则有更好的支持。如果你可以使用这些，那么这就像现在更好的方法。正如你所提到的那样，使用SVG过滤器也可能允许你将过滤器从一边移到另一边

链接地址: http://www.djcxy.com/p/78691.html

上一篇: applying CSS3 Transitions on filters

下一篇: Is there anything wrong with await Task.Run(() => semaphore.WaitOne())?