Apple中的模糊效果

本文主要介绍在前端里比较重要的一个效果——高斯模糊效果,也有人称为毛玻璃特效。在Mac和Windows系统样式上也都在使用模糊效果。下面聚焦于Web前端中的模糊效果开发。

css

模糊效果有两个主要用途,一个是对当前块的内容进行模糊;另一个是对当前块背景进行模糊,但内容是清晰可见的。这对应着css的两个属性,前者是filter,后者则为backdrop-filter

两个属性的用法几乎一致,属性本意为滤镜,系统本身已经预设了一些常用的滤镜效果,对于特殊效果,可能会需要使用到svg来实现。

请看下面的代码

header {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 1);
    backdrop-filter: saturate(180%) blur(20px);
}

header元素是我们经常使用到的导航栏元素,上述代码是将其背景高斯模糊,并且固定在顶部,关于固定顶部可以查看这里

发布时间:2021-05-17
其他阅读

游记 | 山城重庆

最近都在忙着推进中物视的事情,还挺忙的,最近昆明的天气比较难受,工作日都是晴天,到了周末就下雨。刚好碰上在重庆有一个会议需要参加,趁着这个机会就去重庆旅游。

查看原文

WPF中切换主题功能

在现代 Windows 系统中,系统提供了亮色主题和暗色主题,Windows 自带的应用程序都已经适配该功能。本文介绍在使用 WPF 构建 Windows 窗口应用时怎么实现主题切换。

查看原文

本地部署DeepSeek大模型服务

之前的文章介绍了怎么对接DeepSeek的API实现自己的助手,但是依旧使用的DeepSeek官方服务器,在高峰期还是会出现超长延时的情况,本文介绍另一种思路,通过在本机上部署DeepSeek大模型服务来告别卡顿崩溃。

查看原文

Fetch发送请求

fetch 是 javascript 中一个新的 api,用于访问和控制 HTTP 的请求和响应等,不再需要使用传统的 XMLHttoRequest

查看原文

Web前端中实现一个拖动效果

在原生客户端开发中,窗口拖动是一个比较常用的操作。今天把这个效果在网页客户端中实现以下,文章记录一下效果。

查看原文