值得一看

CSS如何实现毛玻璃效果

正文开始阅读,请点击右上角“关注”按钮,关注作者

------正文内容展示,开始汲取新知识------

在苹果的官网上看到看到一个悬浮菜单的毛玻璃效果 被这种效果给吸引到了,深入源码后发现只通过两个css属性就能实现该效果。

CSS如何实现毛玻璃效果-知新网

苹果网站地址https://www.apple.com.c
/macos/big-sur/,有兴趣可以上去看下,上面还有一些更有意思的特效,不得不说苹果的页面体验是真的做得好,有兴趣可以研究下。

关键css属性

backgrou
d: rgba(29,29,31,0.72);

加一个透明度为0.72的背景颜色

backdrop-filter: saturate(180%) blur(20px);

backdrop-filter给元素后方加过滤器,而不是元素,这里加了两个过滤器saturate和blur

温馨提示:本文最后更新于2023-03-10 01:47:08,某些文章具有时效性,若有错误或已失效,请在下方留言或联系悠悠站长
------本文内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
善语结善缘,恶言伤人心。(禁止发送无意义的字符)
提交
头像

昵称

取消
昵称常用语 夸夸
夸夸
还有吗!没看够!
表情代码图片

    暂无评论内容