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

页面效果

此效果主要使用 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,这里是「设计师工作日常」,求点赞求关注!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/661769.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Docker】使用VS创建、运行、打包、部署.net core 6.0 webapi

欢迎来到《小5讲堂》&#xff0c;大家好&#xff0c;我是全栈小5。 这是《Docker容器》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对…

应用智能家居领域中的低功耗蓝牙模块

智能家居&#xff08;smart home, home automation&#xff09;是以住宅为平台&#xff0c;利用综合布线技术、网络通信技术、 安全防范技术、自动控制技术、音视频技术将家居生活有关的设施集成&#xff0c;构建高效的住宅设施与家庭日程事务的管理系统&#xff0c;提升家居安…

MySQL for update锁表还是锁行校验

select * from user where id 1 for update ; 1. for update作用 在MySQL中&#xff0c;使用for update子句可以对查询结果集进行行级锁定&#xff0c;以便在事务中对这些行进行更新或者防止其他事务对这些行进行修改。 当使用for update时&#xff0c;锁定行的方式取决于wh…

AI 智能体:探索自主智能的世界

AI 智能体&#xff1a;探索自主智能的世界 认真的飞速小软 飞速创软 2024-01-30 11:06 发表于新加坡 想象一下&#xff0c;在这样一个世界里&#xff0c;软件自身可以自主地与环境交互&#xff0c;根据收集的数据做出决策&#xff0c;并以最少的人工干预来执行任务。这些AI智能…

WPF 中 Loaded 和 Closing 窗口事件

在 WPF 中&#xff0c;Loaded 和 Closing 是两个常用的窗口事件。下面是对这两个事件的详细解释和示例说明&#xff1a; Loaded 事件&#xff1a; Loaded 事件在窗口&#xff08;或其他可视元素&#xff09;加载完成并准备好进行显示时触发。在 Loaded 事件中&#xff0c;您可…

2024美赛C题全网最早思路 网球运动(持续更新)

2024美赛已经于今天早上6点准时公布题目。本次美赛将全程跟大家一起战斗冲刺O奖&#xff01;思路持续更新。 2024 MCM Problem C: Momentum in Tennis &#xff08;网球运动的势头&#xff09; 注&#xff1a;在网球运动中&#xff0c;"势头"通常指的是比赛中因一系…

npm和yarn区别

都是包管理工具&#xff0c;但是yarn的出现是为了弥补npmV4&#xff08;npmV5结合yarn和自身的一些问题做了很大的升级&#xff0c;性能和速度都提高了&#xff09;及之前版本的一些问题 npmV4的缺点 npm install的时候巨慢。特别是新的项目拉下来要等半天&#xff0c;删除nod…

数据分析基础之《pandas(3)—DataFrame运算》

一、算术运算 1、add() 加法运算 2、sub() 减法运算 3、想要得到每天的涨跌幅大小&#xff0c;求出每天close-open价格差 # 算术运算 close data[close] open1 data[open] # 收盘价减去开盘价 data[m_price_change] close.sub(open1) data.head() 二、逻辑运算 1、逻辑…

2024 美国大学生数学建模竞赛 美赛(C题)网球比赛趋势问题 国际大学生数学建模竞赛| 建模秘籍文章代码思路大全

铛铛&#xff01;小秘籍来咯&#xff01; 小秘籍希望大家都能轻松建模呀&#xff0c;华数杯也会持续给大家放送思路滴~ 抓紧小秘籍&#xff0c;我们出发吧~ 完整内容可以在文章末尾领取&#xff01; 问题1 • 开发一个模型&#xff0c;捕捉到比赛进行时点的流动&#xff0c;…

在linux上,内存不够,设置虚拟内存

在 Linux 上&#xff0c;虚拟内存是指系统将硬盘空间作为内存使用的技术。当系统内存不足时&#xff0c;可以将不常用的内存数据保存到硬盘的交换分区&#xff08;swap partition&#xff09;上&#xff0c;这样释放出来的内存空间就可以被其他应用程序使用&#xff0c;从而避免…

倒计时67天

复习。 一.倒计时79天-CSDN博客 1. #include<bits/stdc.h> using namespace std; #define int long long const int N3e45; const int inf0x3f3f3f3f; int month[13]{0,31,28,31,30,31,30,31,31,30,31,30,31}; void solve() {int a[110]{},cn0;for(int i0;i<100;i)…

LeetCode --169

169. 多数元素 简单 相关标签 相关企业 给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1&#xff1a; 输入&#xff…

Unchecked assignment 错误解决办法

下面一段程序编译 return new PagingModel(); 提示警告&#xff1a;Unchecked assignment public PagingModel<GasProductResponse> getProductList(SaleProductListVo vo) {log.info("[GasProductServiceImpl --> getProductList] - param: {}", JSON.toJ…

three.js CSS3DRenderer、CSS3DSprite渲染HTML标签

有空的老铁关注一下我的抖音&#xff1a; 效果: <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red;position: relative;"></div><…

python脚本扫描win系统中运行程序内存值并修改

用于修改运行中程序的内存值 #!encodingutf8import os import json import psutil import shutil import threading import ctypes import win32api import win32process from win32con import PROCESS_ALL_ACCESS class MemScan:注&#xff1a;一定要以系统管理员身份运行脚…

Kotlin 协程:用源码来理解 ‘viewModelScope‘

Kotlin 协程&#xff1a;用源码来理解 ‘viewModelScope’ Kotlin 协程是 Kotlin 语言的一大特色&#xff0c;它让异步编程变得更简单。在 Android 开发中&#xff0c;我们经常需要在后台线程执行耗时操作&#xff0c;例如网络请求或数据库查询&#xff0c;然后在主线程更新 UI…

Linux getty命令教程:管理物理或虚拟终端的利器(附案例详解和注意事项)

Linux getty命令介绍 getty&#xff0c;全称为get tty&#xff0c;是一个在主机上运行的Unix程序&#xff0c;用于管理物理或虚拟终端&#xff08;TTYs&#xff09;。当它检测到连接时&#xff0c;它会提示输入用户名并运行login程序以验证用户。 Linux getty命令适用的Linux…

微服务—RabbitMQ

目录 初识MQ 同步和异步通讯 同步通讯的优缺点 异步调用方案 异步通信优缺点 常见MQ技术对比 RabbitMQ快速入门 安装RabbitMQ RabbitMQ整体架构与相关概念 常见消息模型​编辑 入门案例 SpringAMQP 基本介绍 SpringAMQP案例——模拟HelloWorld消息模型 Sprin…

SpringCloud-搭建Eureka服务模块

在构建分布式微服务体系中&#xff0c;搭建Eureka服务模块是实现服务注册与发现的关键一步。Spring Cloud作为领先的微服务框架&#xff0c;通过Eureka为我们提供了高效的服务治理能力。本文将深入探讨如何使用Spring Cloud&#xff0c;逐步引导读者完成Eureka服务模块的搭建。…

【HarmonyOS】鸿蒙开发之ArkTs初步认识——第2.1章

ArkTs简介 ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript&#xff08;简称TS&#xff09;生态基础上做了进一步扩展&#xff0c;继承了TS的所有特性&#xff0c;是TS的超集。 以下图可以展示Js&#xff0c;TS&#xff0c;ArkTs的关系 ArkTs基础语…