当前位置： 首页 > news >正文

有趣的css - 动态的毛玻璃背景

news 2026/2/11 0:38:38

页面效果

此效果主要使用 backdrop-filter 属性，以及配合 animation 属性来实现毛玻璃模糊和一些动效。

此效果可适用于登录窗口，网站背景或者一些卡片列表中，使网页更具科技感和空间感。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html代码

<div class="box"><div class="circle-box"><div class="circle"></div><div class="circle"></div></div><div class="bg-filter"></div>
</div>

两个圆形 div（.circle），以及模糊块（.bg-filter）。

css代码

圆形部分主要样式

.circle-box{width: 100%;height: 100%;border-radius: 10px;position: absolute;overflow: hidden;  /* 限制溢出 */
}
.circle:first-child{width: 120px;height: 120px;border-radius: 50%;border: 30px solid #7BF52A;box-sizing: border-box;position: absolute;top: -38px;left: -40px;animation: move-y 3.5s linear infinite; /* 设置动画时间3.5s */
}
.circle:last-child{width: 120px;height: 120px;border-radius: 50%;background: linear-gradient(136deg, #7BF52A 0%, #FFCD56 100%);box-sizing: border-box;position: absolute;bottom: -30px;right: -30px;animation: move-y 5s ease-in-out infinite; /* 设置动画时长5s，与上一个圆环有差异，增强动效 */
}
/* 设置动画参数实现动效循环 */
@keyframes move-y {0% {transform: translateY(0);}50% {transform: translateY(-16px);}100% {transform: translateY(0);}
}

使用 animation 属性以及不同的参数来实现动效，产生动画视觉效果。

使用 backdrop-filter 属性模拟毛玻璃效果

.bg-filter{width: 100%;height: 100%;background: rgba(255,255,255,.05);box-shadow: 0 2px 6px rgba(0,0,0,0.1);backdrop-filter: blur(6px);  /* 用 blur 参数来模拟毛玻璃效果 */border-radius: 10px;box-sizing: border-box;position: absolute;
}

用 backdrop-filter 属性中的 blur 参数来模拟毛玻璃效果，数值越大，模糊效果越重，可适当调试参数，直到你喜欢为止。

完整代码

html页面

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>动态的毛玻璃背景</title></head><body><div class="app"><div class="box"><div class="circle-box"><div class="circle"></div><div class="circle"></div></div><div class="bg-filter"></div></div></div></body>
</html>

css样式

.app{width: 100%;height: 100vh;position: relative;display: flex;justify-content: center;align-items: center;
}
.box{width: 400px;height: 300px;position: relative;
}
.circle-box{width: 100%;height: 100%;border-radius: 10px;position: absolute;overflow: hidden;
}
.circle:first-child{width: 120px;height: 120px;border-radius: 50%;border: 30px solid #7BF52A;box-sizing: border-box;position: absolute;top: -38px;left: -40px;animation: move-y 3.5s linear infinite;
}
.circle:last-child{width: 120px;height: 120px;border-radius: 50%;background: linear-gradient(136deg, #7BF52A 0%, #FFCD56 100%);box-sizing: border-box;position: absolute;bottom: -30px;right: -30px;animation: move-y 5s ease-in-out infinite;
}
.bg-filter{width: 100%;height: 100%;background: rgba(255,255,255,.05);box-shadow: 0 2px 6px rgba(0,0,0,0.1);backdrop-filter: blur(6px);border-radius: 10px;box-sizing: border-box;position: absolute;
}
@keyframes move-y {0% {transform: translateY(0);}50% {transform: translateY(-16px);}100% {transform: translateY(0);}
}

页面效果

以上就是全部代码以及写法思路了，希望你能喜欢，并且给你一些思路启发。

[1] 原文阅读

我是Just，这里是「设计师工作日常」，求点赞求关注！！！

相关文章：

有趣的css - 动态的毛玻璃背景

页面效果 此效果主要使用 backdrop-filter 属性&#xff0c;以及配合 animation 属性来实现毛玻璃模糊和一些动效。 此效果可适用于登录窗口&#xff0c;网站背景或者一些卡片列表中&#xff0c;使网页更具科技感和空间感。 核心代码部分&#xff0c;简要说明了写法思路&#x…...

编程日记 2024/2/2 6:52:22

桥接模式解析

回调设计模式 意图 回调是指一段可以执行的代码&#xff0c;该代码会被作为参数传递给其他代码&#xff0c;在适当的时候&#xff0c;预期这部分代码将会被调用执行。 解释 案例&#xff1a;我们需要在执行完任务后得到通知。为此&#xff0c;我们会向执行器传递一个回调方法…...

编程日记 2024/2/2 6:51:19

MySQL数据库基础第一篇（SQL通用语法与分类）

文章目录 一、SQL通用语法二、SQL分类三、DDL语句四、DML语句1.案例代码2.读出结果 五、DQL语句1.DQL-基本查询2.DQL-条件查询3.DQL-聚合函数4.DQL-分组查询5.DQL-排序查询6.DQL-分页查询7.DQL语句-执行顺序1.案例代码2.读出结果 六、DCL语句1.DCL-管理用户2.DCL-权限控制1.案例…...

编程日记 2024/2/2 6:48:17

【Qt学习笔记】（一）初识Qt

Qt学习笔记 1 使用Qt Creator 新建项目2 项目代码解释3 创建第一个 Hello World 程序4 关于内存泄漏问题5 Qt 中的对象树6 关于 qDebug&#xff08;&#xff09;的使用7 使用其他方式创建一个 Hello World 程序&#xff08;编辑框和按钮方式&#xff09;8 关于 Qt 中的命名规范…...

编程日记 2024/2/2 6:45:13

YIA主题如何关闭新版本升级提示？WordPress主题怎么取消升级提醒？

前两天YIA主题发布了升级到2.8版本&#xff0c;新增了一些功能&#xff0c;优化调整修复了一些功能&#xff0c;但是这些功能调整幅度不大&#xff0c;加上boke112百科使用的YIA主题已经进行了很多方面的个性化修改&#xff0c;所以就懒得升级了&#xff0c;但是每次进入WordPr…...

编程日记 2024/2/2 6:41:09

消息队列的应用场景

消息队列的应用场景 消息队列中间件是分布式系统中重要的组件&#xff0c;主要解决应用耦合&#xff0c;异步消息&#xff0c;流量削锋等问题实现高性能&#xff0c;高可用&#xff0c;可伸缩和最终一致性架构使用较多的消息队列有ActiveMQ&#xff0c;RabbitMQ&#xff0c;Ze…...

编程日记 2024/2/2 6:40:08

Arcgis10.3安装

所需软件地址 链接&#xff1a;https://pan.baidu.com/s/1aAykUDjkaXjdwFjDvAR83Q?pwdbs2i 提取码&#xff1a;bs2i 1、安装License Manager 点击License Manager.exe&#xff0c;默认下一步。 安装完&#xff0c;点击License Server Administrator&#xff0c;停止服务。…...

编程日记 2024/2/2 6:38:06

用Python和 Cryptography库给你的文件加密解密

用Python和 Cryptography库给你的文件加密解密 用Python和 Cryptography库给你的文件加把安全锁。 先介绍与加密解密有关的几个基本概念。 加密&#xff08;Encryption&#xff09;&#xff1a;加密是将明文转换为密文的过程&#xff0c;使得未经授权的人无法读懂。 解密&a…...

编程日记 2024/2/2 6:36:03

element-ui button 仿写 demo

基于上篇 button 源码分享写了一个简单 demo&#xff0c;在写 demo 的过程中&#xff0c;又发现了一个小细节&#xff0c;分享一下&#xff1a; 1、组件部分&#xff1a; <template><buttonclass"yss-button"click"handleClick":class"[ty…...

编程日记 2024/2/2 6:30:59

Maya------创建多边形工具

配合导入图像使用 Tab键可以删除一个点&#xff01; 模型不能超过4边面&#xff01;多切割工具进行连接&#xff01; 15.maya常用命令5.创建多边形工具 反转 双显 挤出_哔哩哔哩_bilibili...

编程日记 2024/2/2 6:28:57

SQL分组统计条数时,不存在组类型，如何显示条数为0

首先有张表 CREATE TABLE person (id int NOT NULL AUTO_INCREMENT,name varchar(255) DEFAULT NULL,type int DEFAULT NULL,PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT2 DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_0900_ai_ci;表里很简单三条数据&#xff1a; INSERT INT…...

编程日记 2024/2/2 6:27:56

通过日期计算星期函数（C语言版）

测试源代码&#xff1a; #include <stdio.h>int getDayOfWeek(int year, int month, int day) {if (month < 3) {month 12;year--;}int q day;int m month;int K year % 100;int J year / 100;int dayOfWeek (q 13 * (m 1) / 5 K K / 4 J / 4 - 2 * J) % …...

编程日记 2024/2/2 6:26:55

配置支持 OpenAPI 的 ASP.NET Core 应用

写在前面 Swagger 是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。 本文记录如何配置基于Swagger 的 ASP.NET Core 应用程序的 OpenAPI 规范。 需要从NuGet 安装 Swashbuckle.AspNetCore 包 代码实现 var builder WebApplicati…...

编程日记 2024/2/2 6:25:54

前端自己整理的学习面试笔记

简介 以下是本人一年多整理的前端学习笔记&#xff0c;现汇总分享给大家&#xff0c;很多问题都是面试必问的 更多学习资源&#xff0c;可以点击我获取更多 1 js数据类型 原始类型&#xff1a; null undefined number string boolean Symbol BigInt 引用类型&#xff1a; 对…...

编程日记 2024/2/2 6:23:52

jQuery html的使用

jquery中的html方法可以获取和设置标签的html内容 var $div $("div")// 获取标签div的html内容alert($div.html())console.log($div.html()) .html: 设置标签的html内容&#xff0c;之前的内容会清除&#xff08;只会显示 CSDN&#xff09; // 设置标签的html内容&…...

编程日记 2024/2/2 6:22:51

锦上添花！特征选择＋深度学习：mRMR-CNN-BiGRU-Attention故障识别模型！特征按重要性排序！最大相关最小冗余！

适用平台&#xff1a;Matlab2023版及以上 特征选择方法&#xff1a;"最大相关最小冗余"&#xff08;Maximal Relevance and Minimal Redundancy&#xff0c;简称MRMR&#xff09;是一种用于特征选择的方法。该方法旨在找到最相关的特征集&#xff0c;同时最小化特征…...

编程日记 2024/2/2 6:21:50

C++ QT入门2——记事本功能实现与优化（事件处理+基本控件）

C QT入门2——记事本功能优化&#xff08;事件处理基本控件&#xff09; 一、记事本功能优化编码乱码问题QComboBox下拉控件QString、string、char * 间的数据转化编码问题解决整合 光标行列值显示记事本打开窗口标题关闭按钮优化—弹窗提示快捷键设计 二、☆ QT事件处理事件处…...

编程日记 2024/2/2 6:17:45

《Lua程序设计》-- 学习10

环境&#xff08;Environment&#xff09; 具有动态名称的全局变量 全局变量的声明 由于Lua语言将全局变量存放在一个普通的表中&#xff0c;所以可以通过元表来发现访问不存在全局变量的情况。 正如前面所提到的&#xff0c;我们不允许值为nil的全局变量&#xff0c;因为值为…...

编程日记 2024/2/2 6:14:42

Linux内核编译-ARM

步骤一、下载源码及交叉编译器后解压 linux kernel官网 ARM GCC交叉编译器 步骤二、安装软件 sudo apt-get install ncurses-dev sudo apt-get install flex sudo apt-get install bison sudo apt install libgtk2.0-dev libglib2.0-dev libglade2-dev sudo apt install libs…...

编程日记 2024/2/2 6:12:40

开源编辑器：ONLYOFFICE文档又更新了！

办公软件 ONLYOFFICE文档最新版本 8.0 现已发布&#xff1a;PDF 表单、RTL、单变量求解、图表向导、插件界面设计等更新。 什么是 ONLYOFFICE 文档 ONLYOFFICE 文档是一套功能强大的文档编辑器&#xff0c;支持编辑处理文本文档、电子表格、演示文稿、可填写的表单、PDF&#…...

编程日记 2024/2/2 6:11:39

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2026/2/8 4:37:15

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2026/1/25 3:21:09

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/30 20:42:46

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/2/1 4:53:36

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/12/14 13:11:33

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

编程新知 2026/1/30 9:51:12

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2026/2/10 7:13:28

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2026/2/10 11:29:00