CSS实现毛玻璃效果

2021-02-08
56
289

实现毛玻璃效果的方法有3

  1. filter: blur()
  2. backdrop-filter: blur()
  3. Photoshop 处理一张毛玻璃图片,哪里用往哪贴(不推荐,图像清晰度,网络io等问题会导致视觉效果很不理想)

backdrop-filter: blur()

步骤如下:

  1. 先把各种不规则(也可以是规则)的形状并且带颜色的块状元素铺满整个可视区
  2. 用一个透明遮罩层罩住所有带颜色的元素,并且给这个遮罩层backdrop-filter: blur(66px) 的css属性即可

backdrop-filter

也可以狠戳这里预览效果 backdrop-filter毛玻璃效果

HTML:

<div class="wrapper">
  <div class="content">
    <div class="filter-box"></div>
    <div class="filter-box"></div>
    <div class="filter-box"></div>
    <div class="filter-box"></div>
    <div class="filter-box"></div>
    <div class="filter-box"></div>
    <div class="filter-layer"></div>
  </div>
</div>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}
.content {
  width: 750px;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.filter-box {
  position: absolute;
  width: 340px;
  height: 440px;
  transform: rotate(-45deg);
  border-radius: 149px;
}
.filter-box:first-child {
  bottom: -44px;
  left: -80px;
  background-color: #FF9E84;
}
.filter-box:nth-child(2) {
  bottom: 20px;
  left: 150px;
  background-color: #FFCCE1;
}
.filter-box:nth-child(3) {
  width: 150px;
  height: 200px;
  bottom: 60px;
  right: -111px;
  background-color: #2DCAFF;
}
.filter-box:nth-child(4) {
  top: -120px;
  right: 40px;
  background-color: #FFCCE1;
}
.filter-box:nth-child(5) {
  top: 0;
  right: 150px;
  background-color: rgb(84, 171, 253);
}
.filter-box:nth-child(6) {
  width: 220px;
  height: 330px;
  top: 150px;
  right: 100px;
  background-color: #ffb89c;
}
.filter-layer {
  width: 100%;
  height: 100%;
  backdrop-filter: blur(66px);
  -webkit-backdrop-filter: blur(66px);
}

现在看起来实现毛玻璃似乎真的超级简单,但是往往有一套不成文且让开发者头大的规则,那就是:好东西一般都不兼容!

backdrop-filter-can-i-use

通过上图可以清晰的看出 backdrop-filter: blur 的兼容性红区很大,尤其是移动端,兼容性很差。 那么再来看看 filter: blur

以上兼容性数据来自于 https://www.caniuse.com/

filter: blur()

从上图可以看出 filter: blur 的兼容性要好很多,基本上兼容所有主流设备浏览器。只是实现方法略微繁琐一丢丢。严格来说不但没有更繁琐,反而更简洁,因为不需要遮罩层,可以通过元素本身实现朦胧不清的毛玻璃效果,然后把每个元素分布开来就好。

HTML:

<div class="wrapper">
  <div class="content">
    <div class="filter-box"></div>
    <div class="filter-box"></div>
    <div class="filter-box"></div>
    <div class="filter-box"></div>
    <div class="filter-box"></div>
    <div class="filter-box"></div>
  </div>
</div>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}
.content {
  width: 750px;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.filter-box {
  position: absolute;
  width: 340px;
  height: 440px;
  transform: rotate(-45deg);
  border-radius: 149px;
  filter: blur(66px);
  -webkit-filter: blur(66px);
}
.filter-box:first-child {
  bottom: -44px;
  left: -80px;
  background-color: #FF9E84;
}
.filter-box:nth-child(2) {
  bottom: 20px;
  left: 150px;
  background-color: #FFCCE1;
}
.filter-box:nth-child(3) {
  width: 150px;
  height: 200px;
  bottom: 60px;
  right: -111px;
  background-color: #2DCAFF;
}
.filter-box:nth-child(4) {
  top: -120px;
  right: 40px;
  background-color: #FFCCE1;
}
.filter-box:nth-child(5) {
  top: 0;
  right: 150px;
  background-color: rgb(84, 171, 253);
}
.filter-box:nth-child(6) {
  width: 220px;
  height: 330px;
  top: 150px;
  right: 100px;
  background-color: #ffb89c;
}

最终实现的效果是一样的,猛戳这里预览:filter: blur

移动端不渲染/渲染不全等问题

如果你已经阅读到了这里,相信你也发现了另一个重要且让人恶心的问题,那就是电脑上怎么写都可以,但是一到手机上,就出问题(移动端不渲染/渲染不全等问题)。

首先我们应该明白一个问题,PC端的硬件设备的算力要普遍远高于移动端(不是全部,不要杠我),不管是CPU还是GPU。而且移动端还要面临另一个痛点:散热问题。所以在渲染方面处理的更是谨小慎微。web渲染也无法逃出底层渲染机制的“安排”。尤其是一些相对耗费性能的渲染行为,系统会默认启用一些规则来优化或者说均衡硬件负载,不至于让CPU因满负载出现过热以及运算能力下降的风险。这其中就包含大部分人口中常说的:硬件加速(GPU加速)。

如果你发现你的项目在PC端正常,但是在移动端却没有达到预期的渲染效果,那么多半因素可能是没有触发硬件加速导致的,以下列举了可以出发硬件加速的几个CSS属性:

  1. transfrom
  2. opacity
  3. filter
  4. will-change

在不需要改变现有元素样式的情况下,我通常使用下面两种方法来开启硬件加速:

/** 对于其他浏览器兼容写法请自行补全 **/
/** 如: -webkit-transform: translateZ(0) **/
transform: translate3d(0, 0, 0);
transform: translateZ(0);

那么前面使用filter: blur 实现的毛玻璃也应当在元素上添加该属性

.filter-box {
  position: absolute;
  width: 340px;
  height: 440px;
  transform: rotate(-45deg);
  border-radius: 149px;
  filter: blur(66px);
  -webkit-filter: blur(66px);
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

到这里,相信毛玻璃的移动端渲染问题已经解决了,但是细心的你很快又会发现新的问题:上下滑动的时候抖屏,作为一个追求极致用户体验的web攻城狮,是无论如何也无法忍受这种问题的,那么稍后,我将在另一篇文章中讲讲:CSS硬件加速的坑

56

文章版权所有:PORK's BLOG,采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。

欢迎分享,转载务必保留出处及原文链接