毛玻璃主题的文章列表，还有毛玻璃的技术要点_第1页

css毛玻璃效果

毛玻璃其实就是磨砂玻璃，能够模糊的看清背后的风景，让人感觉有种朦胧美，让界面看上去有些层次感。比如：高大上啊，接下来肯定是眼馋手痒的过程。。。当然，用ps搞一个全景毛玻璃背景毫无疑问是最省事的，那接下来就没啥事可干了。当然nonono了。毛玻璃无疑就是种模糊了，少不了filterblur。最终效果（chrome）：天气...

代码星球 ·2021-02-25

CSS遮罩效果和毛玻璃效果

　　本文将详细介绍CSS遮罩效果和毛玻璃效果普通遮罩　　一般地，处理全屏遮罩的方法是使用额外标签<style>.overlay{position:fixed;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.8);}.lightbox{p...

代码星球 ·2020-05-24

原来你是这样的毛玻璃

以前写毛玻璃用的都是图层覆盖-->传送门，看了LEAVEROU的《CSS揭秘》后才发现还有更优雅的毛玻璃：<!DOCTYPEhtml><html><head><title>原来你是这样的毛玻璃</title><metacharset="utf-8"...

代码星球 ·2020-04-10

解决css3毛玻璃效果(blur)有白边问题

做一个登录页，全屏背景图毛玻璃效果，实现方法如下：HTML：<body>　　<divclass="login-wrap">　　　　<divclass="login-mask"></div>　　　　<divclass="login-box"></div&g...

代码星球 ·2020-04-10

CSS3中毛玻璃效果的使用方法

今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞，仔细研究了一下它的实现方式，是使用js配合background-image:-webkit-canvas的形式绘制出的毛玻璃背景图片。不过今天又仔细研究了一下css3中的blur方法，可以实现同样的效果。且配合JS可以实现模糊缩放的效果CSS代码....

开发笔记 ·2020-03-20