探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题

前端之家收集整理的这篇文章主要介绍了探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

属性:

Highlighter">

:

3dball

效果,想到了 CSS 混合模式 mix-blend-mode,寻思着,利用混合模式,是否能让效果更上一层楼或者碰撞出一些其他火花。

mix-blend-mode:我们通常称之为混合模式,利用混合模式将多个图层混合可以得到一个新的效果mix-blend-mode 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

mix-blend-mode

加上了一个混合模式之后,神奇的事情发生了,3D 效果消失了。

代码中添加这样一句:

Highlighter">

3dball2

效果从 CSS 3D 变成了 2D。

qq 20181217194534

效果是在 chrome 65.0.3325.181 试验得到的。

image

Layer borders:

image

上传给 GPU 进行渲染加速。

  • 效果:

balllayer

  • 添加了 mix-blend-mode 的 3D 模式下,开启 Layer borders 效果

balllayer2

mix-blend-mode 的 3D 模式下,确实在整个球形元素之外,又多了一层蓝色 tile。也就是上文提到的独立的渲染平面,也就是因为这个渲染平面不支持 preserve-3d 的原因,我们最终得到了一个 2D 平面图形。

qq 20181218111248

mix-blend-mode 多生成了一个独立渲染平面导致的 3D 失效,那么是否有其他元素也会导致同样的结果呢?

mix-blend-mode,我又给设置了 3d 的元素添加了一个滤镜:

Highlighter">

balllayer3

生成一个渲染平面,且包含了 preserve-3d 的属性,都会导致内部的 CSS 3D 失效。

属性,都会导致 CSS 3D 失效:

  • mix-blend-mode
  • background-blend-mode
  • filter

属性更多的锦上添花的作用,所以大部分时候,不使用它们就不会有问题, 所以影响不是很大。

FBO 准确而言是什么我也无法 100% 确定,推测应该是 Frame Buffer Object,帧缓存对象,存在于显存中。帧缓存是一些二维数组和 OpenGL 所使用的存储区的集合:颜色缓存、深度缓存、模板缓存和累计缓存。

图片,用于加速渲染。

,并且最终状态是 Untriaged,表示尚未分配优先级,意思是等待某人确定哪个人应该认领并修复该特定错误。所以,短期内可能无望解决。

 ,持续更新,欢迎点个 star 订阅收藏。

文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

dio controls="controls" style="display: none;">

原文链接:https://www.f2er.com/css/71043.html

猜你在找的CSS相关文章