css实现毛玻璃效果

发表于2024-07-19|更新于2026-02-24

|浏览量:

醉过才知酒浓，爱过才知情重。你不能做我的诗，正如我不能做你的梦。——胡适

从这里学过来的

Backdrop Filter Effect With CSS | CSS-Tricks

核心代码如下：

1
2
3

.container {
  backdrop-filter: blur(10px);
}

效果

进阶学习backdrop：

Backdrop-filter | CSS-Tricks

前端

相关推荐

2022-11-10

parceljs

趋炎附势的人，不可与其共患难。——拜伦分享一个前端打包工具官方文档：https://parceljs.org/ 中文文档：https://www.parceljs.cn/ 非常好用

2024-07-13

在线web工程演示stackblitz

饥梳头，饱洗澡。——杨慎是这个网址 https://stackblitz.com/ 例如： https://stackblitz.com/github/slidevjs/new?file=slides.md 打开就直接构建并可以自由修改，不用在本地npm i啦！相当的方便相当的nice 比较适合开源项目用来演示

2021-11-03

vue项目启动后自动打开

我见青山多妩媚，料青山见我应如是。――辛弃疾《贺新郎》找到项目路径下的package.json 在scripts下的serve后面加上--open即可

2021-11-02

vue父组件调用子组件方法

抱怨身处黑暗，不如提灯前行。——刘同首先是官方文档这里使用ref属性去访问子元素 1<hello-world ref="helloWorld" msg="Hello World"></hello-world> 然后打印一下 1console.log(this.$refs.helloWorld); 可以看到成功获取到再到子组件定义一个方法：父组件访问：效果：

2021-07-12

cursor

生命是一个说故事的人，而每一刻间的故事都是新鲜的。——朱光潜我们有时候会在页面上定义鼠标移入某个元素时的效果请把鼠标移动到单词上，可以看到鼠标指针发生变化： auto crosshair default e-resize help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait 123456789101112131415161718请把鼠标移动到单词上，可以看到鼠标指针发生变化：auto crosshair default</sp...

2023-04-15

vueuse

多数人在心底蔑视德，但很少有人轻视荣誉。——沃夫拿格分享一个vue的组合式api封装库vueuse github：https://github.com/vueuse/vueuse 官档：https://vueuse.org/ 大致用法： 12345678910111213141516171819202122import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'export default { setup() { // tracks mouse position const { x, y } = useMouse() // is user prefers dark theme const isDark = usePreferredDark() // persist state in localStorage const store = useLocalStorag...

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中