Question

是否可以预先渲染过渡：

filter:blur(10px) grayscale(100%) brightness(50%);

......对此：

filter:blur(0) grayscale(0) brightness(100%);

我希望平稳过渡，但现在FPS非常低。请参阅下面的示例，在整页模式下。（在全高清屏幕上使用NVIDIA GeForce GT 240M进行测试，因此你的速度更快的GPU可能不会像我的那么慢。）

＆＃13;

div {
  background-image: url('https://static.pexels.com/photos/1998/sea-landscape-mountains-nature.jpg');
  background-size: cover;
  -webkit-filter: blur(10px) grayscale(100%) brightness(50%);
  filter: blur(10px) grayscale(100%) brightness(50%);
  height: 1080px;
  transition: all 1s;
  width: 1920px;
  will-change: filter;
}
div:hover {
  -webkit-filter: blur(0) grayscale(0) brightness(100%);
  filter: blur(0) grayscale(0) brightness(100%);
}

＆＃13;

<div></div>

＆＃13;

Answer 1

我怀疑这没有金币，因为浏览器可能总是会有稍微不同的过滤器实现，而像blur()这样的视觉效果可能总是有问题。也就是说 - 有一个名为will-change的CSS属性正是出于这种情况：

.my-element {
  will-change: filter;
}

will-change属性本身不会触发预呈现，但它确实为支持的浏览器提供了一个预测，即此元素的filter属性将在某个时刻发生变化，并给予他们时间优化。这通常会导致在支持浏览器时创建一个新的硬件支持的渲染层，从而产生流畅的动画。

目前支持不是很好，但仍然是：最新的Chrome＆amp; Opera（包括Android）以及最新的Firefox。 WebKit已实现，因此可能会在下一个Safari中发布。对于其他人，评论中提到的transform - hack通常具有类似的效果（因为它通过添加空3D转换触发硬件支持的渲染层），但您的里程可能会有所不同。

预渲染CSS过滤器转换？

1 个答案: