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

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

news 2025/10/8 13:37:16

页面效果

此效果主要使用 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

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2025/9/28 3:37:43

DBLP数据库是什么？

DBLP&#xff08;Digital Bibliography & Library Project&#xff09;Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高&#xff0c;数据库文献更新速度很快&#xff0c;很好地反映了国际计算机科学学术研…...

编程新知 2025/10/1 14:29:05

水泥厂自动化升级利器：Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...

编程新知 2025/10/3 15:42:25

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程（6.3）

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

编程新知 2025/10/6 1:49:57

Python常用模块：time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...

编程新知 2025/9/18 0:47:08

LUA+Reids实现库存秒杀预扣减 记录流水 以及自己的思考

目录 lua脚本 记录流水 记录流水的作用 流水什么时候删除 我们在做库存扣减的时候&#xff0c;显示基于Lua脚本和Redis实现的预扣减 这样可以在秒杀扣减的时候保证操作的原子性和高效性 lua脚本 // ... 已有代码 ...Overridepublic InventoryResponse decrease(Inventor…...

编程新知 2025/9/24 10:06:05

21-Oracle 23 ai-Automatic SQL Plan Management（SPM)

小伙伴们&#xff0c;有没有迁移数据库完毕后或是突然某一天在同一个实例上同样的SQL&#xff0c; 性能不一样了、业务反馈卡顿、业务超时等各种匪夷所思的现状。 于是SPM定位开始&#xff0c;OCM考试中SPM必考。 其他的AWR、ASH、SQLHC、SQLT、SQL profile等换作下一个话题…...

编程新知 2025/9/27 18:09:41

【Zephyr 系列 16】构建 BLE + LoRa 协同通信系统：网关转发与混合调度实战

🧠关键词：Zephyr、BLE、LoRa、混合通信、事件驱动、网关中继、低功耗调度 📌面向读者：希望将 BLE 和 LoRa 结合应用于资产追踪、环境监测、远程数据采集等场景的开发者 📊篇幅预计：5300+ 字 🧭 背景与需求 在许多 IoT 项目中，单一通信方式往往难以兼顾近场数据采集…...

编程新知 2025/10/7 1:00:47

CCF 开源发展委员会 “开源高校行“ 暨红山开源 + OpenAtom openKylin 高校行活动在西安四所高校成功举办

点击蓝字 关注我们 CCF Opensource Development Committee CCF开源高校行 暨红山开源 openKylin 高校行 西安站 5 月 26 日至 28 日&#xff0c;CCF 开源发展委员会 "开源高校行" 暨红山开源 OpenAtom openKylin 高校行活动在西安四所高校&#xff08;西安交通大学…...

编程新知 2025/10/3 0:02:57

智慧城市项目总体建设方案（Word700页+）

1 背景、现状和必要性 1.1 背景 1.1.1 立项背景情况 1.1.2 立项依据 1.2 现状 1.2.1 党建体系运行现状 1.2.2 政务体系运行现状 1.2.3 社会治理运行现状 1.2.4 安全监管体系现状 1.2.5 环保体系运行现状 1.2.6 城建体系运行现状 1.2.7 社区体系运行现状 1.2.8 园区…...

编程新知 2025/10/6 8:49:41