前端模糊实现那点事

前言

在一个资源网站发现一个弹框效果,如下图,点击搜索框后,网站整个内容模糊了,只有弹框区内容是清晰的,看起来弹框区的元素更突出显眼一点,移动端这种类似模糊效果很常见,在PC端的网站,我日常逛的一些网站似乎没见过这样做模糊效果,虽然这种背景模糊只是前端的一个小效果,但是用起来的时候给我一种眼前一亮的感觉,这个网站的产品设计是走了心的 👍👍,接下来我们就顺藤摸瓜,分析一下 Ta 的模糊实现

EMOJIALL官方地址: www.emojiall.com/zh-hans

分析

F12 打开浏览器控制台,在 元素 找对应的 html 标签,可以发现是加了一个 div 层,然后这个 div 添加了 backdrop-filter: blur(1px),通过取消这个 css 属性,可以恢复清晰状态

小技巧

有些效果中的 html 元素是动态控制的,如果内容太多静态情况下可能不好找,可以一边操作页面,一边观察 元素 的内容变化去分析

backdrop-filter

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。

上面是官方介绍,在这个站点里的实现似乎是搜索弹框后面添加了一个 div,然后 div 元素设置了 backdrop-filter: blur(1px),里面使用了 blur() 函数

blur()

将高斯模糊应用于输入图像

使用方式为 blur(radius)

radius 是模糊的半径。定义了高斯函数的标准偏差值,即屏幕上有多少像素相互融合; 因此,较大的值会产生更多模糊。值为 0 会使输入保持不变。该值为空则为 0

支持 0,px,rem 写法

注意! 直接 blur(100) 是无效的

本地复现

本地使用 div 模拟一个弹框,然后设置 divz-index 属性,使其高度高于页面用来做背景的 div,设置 divbackdrop-filter: blur(2px) 属性,达到背景元素模糊的效果

这里提供了一个对照组后的效果,直接看 backdrop-filter:blur(2px) 的设置,背景内容为文字和图片,div 标签内容设置基于父元素相对定位的方式,使其在背景区域之上,设置 backdrop-filter: blur(2px) 使其后面元素模糊

html 复制代码
<div class="position-relative">
  <div class="position-border backdrop-filter">
    backdrop-filter:blur(2px) 效果
  </div>
  <div class="filter-blur">
    <p>人物和(>^ω^<)喵</p>
    <img src="../img/1.jpg" />
  </div>
</div>
css 复制代码
.position-border {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}

.backdrop-filter {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

移动端 HarmoneyOS 系统中APP的操作菜单,也是类似的弹框内容后面的元素都模糊

小结

到这里,就实现了背景模糊的效果,主要设置 backgrop-filter 属性,在实际应用中按需调整元素就可以了,还有其他实现模糊的方式吗?

扩展

filter

filter 属性将模糊或颜色偏移等图形效果应用于元素

filter 属性可以直接实现当前元素模糊,同样也是设置 blur(2px), 直接在文字和图片的父级 div 上设置 filter:blur(2px) 属性,直接在元素上设置模糊效果和 backgrop-filter 属性效果一致,只是使用场景不一样

html 复制代码
<div>
  <h3>filter:blur(2px) 效果</h3>
  <div class="filter-blur">
    <p>人物和(>^ω^<)喵</p>
    <img src="../img/1.jpg" />
  </div>
</div>
css 复制代码
.filter-blur {
  filter: blur(2px);
}

CSS filter 常用函数

  • blur():给元素添加高斯模糊效果
  • brightness():给元素添加亮度调节效果
  • contrast():给元素添加对比度调节效果
  • drop-shadow():给元素添加投影效果
  • grayscale():给元素添加灰度转换效果
  • hue-rotate():给元素添加色相旋转效果
  • invert():给元素添加反色效果
  • opacity():给元素添加透明度调节效果
  • saturate():给元素添加饱和度调节效果
  • sepia():给元素添加怀旧色调效果

CanvasRenderingContext2D.filter

CanvasRenderingContext2D.filter 是 Canvas 2D API 提供模糊、灰度等过滤效果的属性。它类似于 CSS filter属性,并且接受相同的函数

canvas 中使用 CanvasRenderingContext2D.filter 也可以实现模糊效果,设置 blur(2px)

html 复制代码
<canvas id="canvas" style="width:400px;height: 140px;border:1px solid #ccc;"></canvas>
js 复制代码
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.filter = "blur(2px)";
ctx.font = "30px serif";
ctx.fillText("人物和(>^ω^<)喵", 10, 100);

Demo 代码链接

github.com/gywgithub/F...

总结

把一些很简单CSS属性结合起来,就能实现很多很酷的效果,培养善于发现美的眼睛,去探索世界的美好


这个广告里面插图的这个男人,猛的一看有点像前端祖师爷尤大呀,你们有这感觉吗?🤨🤨

欢迎大家讨论交流,如果文章感觉有用,随手点个赞再走呗 ^_^ 🥰🥰

微信公众号:草帽Lufei

相关推荐
浏览器API调用工程师_Taylor9 分钟前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫
赵润凤18 分钟前
Vue 高级视频播放器实现指南
前端
FogLetter33 分钟前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
小公主1 小时前
如何利用闭包封装私有变量?掌握防抖、节流与 this 问题的巧妙解决方案
前端
烛阴1 小时前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
前端 贾公子1 小时前
tailwind ( uni ) === 自定义主题
前端
独立开阀者_FwtCoder1 小时前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
白白李媛媛1 小时前
vue3中实现echarts打印功能
前端·vue.js·echarts
尘心cx1 小时前
前端-HTML-day2
前端·html
歘chua1 小时前
组件封装:封装一个可复用的crud界面的思路
前端