前端模糊实现那点事

简介: 前端模糊实现那点事

前言

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

image.png

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

分析

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

image.png

小技巧

有些效果中的 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) 属性,达到背景元素模糊的效果

image.png

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

<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>
.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的操作菜单,也是类似的弹框内容后面的元素都模糊

image.png

小结

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

扩展

filter

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

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

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

image.png

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)

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

image.png

Demo 代码链接

github.com/gywgithub/F…

总结

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


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

image.png

目录
相关文章
|
3天前
|
人工智能 自然语言处理 Shell
深度评测 | 仅用3分钟,百炼调用满血版 Deepseek-r1 API,百万Token免费用,简直不要太爽。
仅用3分钟,百炼调用满血版Deepseek-r1 API,享受百万免费Token。阿里云提供零门槛、快速部署的解决方案,支持云控制台和Cloud Shell两种方式,操作简便。Deepseek-r1满血版在推理能力上表现出色,尤其擅长数学、代码和自然语言处理任务,使用过程中无卡顿,体验丝滑。结合Chatbox工具,用户可轻松掌控模型,提升工作效率。阿里云大模型服务平台百炼不仅速度快,还确保数据安全,值得信赖。
157353 24
深度评测 | 仅用3分钟,百炼调用满血版 Deepseek-r1 API,百万Token免费用,简直不要太爽。
|
5天前
|
人工智能 API 网络安全
用DeepSeek,就在阿里云!四种方式助您快速使用 DeepSeek-R1 满血版!更有内部实战指导!
DeepSeek自发布以来,凭借卓越的技术性能和开源策略迅速吸引了全球关注。DeepSeek-R1作为系列中的佼佼者,在多个基准测试中超越现有顶尖模型,展现了强大的推理能力。然而,由于其爆火及受到黑客攻击,官网使用受限,影响用户体验。为解决这一问题,阿里云提供了多种解决方案。
16965 37
|
13天前
|
机器学习/深度学习 人工智能 自然语言处理
PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型
DeepSeek 系列模型以其卓越性能在全球范围内备受瞩目,多次评测中表现优异,性能接近甚至超越国际顶尖闭源模型(如OpenAI的GPT-4、Claude-3.5-Sonnet等)。企业用户和开发者可使用 PAI 平台一键部署 DeepSeek 系列模型,实现 DeepSeek 系列模型与现有业务的高效融合。
|
5天前
|
并行计算 PyTorch 算法框架/工具
本地部署DeepSeek模型
要在本地部署DeepSeek模型,需准备Linux(推荐Ubuntu 20.04+)或兼容的Windows/macOS环境,配备NVIDIA GPU(建议RTX 3060+)。安装Python 3.8+、PyTorch/TensorFlow等依赖,并通过官方渠道下载模型文件。配置模型后,编写推理脚本进行测试,可选使用FastAPI服务化部署或Docker容器化。注意资源监控和许可协议。
1310 8
|
13天前
|
人工智能 搜索推荐 Docker
手把手教你使用 Ollama 和 LobeChat 快速本地部署 DeepSeek R1 模型,创建个性化 AI 助手
DeepSeek R1 + LobeChat + Ollama:快速本地部署模型,创建个性化 AI 助手
3416 117
手把手教你使用 Ollama 和 LobeChat 快速本地部署 DeepSeek R1 模型,创建个性化 AI 助手
|
8天前
|
人工智能 自然语言处理 API
DeepSeek全尺寸模型上线阿里云百炼!
阿里云百炼平台近日上线了DeepSeek-V3、DeepSeek-R1及其蒸馏版本等六款全尺寸AI模型,参数量达671B,提供高达100万免费tokens。这些模型在数学、代码、自然语言推理等任务上表现出色,支持灵活调用和经济高效的解决方案,助力开发者和企业加速创新与数字化转型。示例代码展示了如何通过API使用DeepSeek-R1模型进行推理,用户可轻松获取思考过程和最终答案。
|
5天前
|
人工智能 自然语言处理 程序员
如何在通义灵码里用上DeepSeek-V3 和 DeepSeek-R1 满血版671B模型?
除了 AI 程序员的重磅上线外,近期通义灵码能力再升级全新上线模型选择功能,目前已经支持 Qwen2.5、DeepSeek-V3 和 R1系列模型,用户可以在 VSCode 和 JetBrains 里搜索并下载最新通义灵码插件,在输入框里选择模型,即可轻松切换模型。
934 14
|
12天前
|
API 开发工具 Python
阿里云PAI部署DeepSeek及调用
本文介绍如何在阿里云PAI EAS上部署DeepSeek模型,涵盖7B模型的部署、SDK和API调用。7B模型只需一张A10显卡,部署时间约10分钟。文章详细展示了模型信息查看、在线调试及通过OpenAI SDK和Python Requests进行调用的步骤,并附有测试结果和参考文档链接。
1938 9
阿里云PAI部署DeepSeek及调用
|
9天前
|
人工智能 数据可视化 Linux
【保姆级教程】3步搞定DeepSeek本地部署
DeepSeek在2025年春节期间突然爆火出圈。在目前DeepSeek的网站中,极不稳定,总是服务器繁忙,这时候本地部署就可以有效规避问题。本文以最浅显易懂的方式带读者一起完成DeepSeek-r1大模型的本地部署。
|
12天前
|
缓存 自然语言处理 安全
快速调用 Deepseek API!【超详细教程】
Deepseek 强大的功能,在本教程中,将指导您如何获取 DeepSeek API 密钥,并演示如何使用该密钥调用 DeepSeek API 以进行调试。

热门文章

最新文章