纯CSS的实时部分毛玻璃特效

2013 年 10 月 3 日
 anson0370
ios7 各种毛玻璃啊有没有

需要最新的 chrome 以及去 chrome://flags 里打开 #enable-experimental-webkit-features

demo 在此 http://codepen.io/anson0370/details/jLyqt

见过另一种实现方式是通过复制一份 dom 做的，这个则是用了 CSS Regions
8160 次点击
所在节点    分享创造
11 条回复
cctvsmg
2013 年 10 月 3 日
#enable-experimental-webkit-features required
yangqi
2013 年 10 月 3 日
+1
lhx2008
2013 年 10 月 4 日
谁能给我讲解下网页除了字体在不断放大缩小外，还发生了什么
anson0370
2013 年 10 月 4 日
@lhx2008 请看原文第二行 正确设置后应该看到问题的上半部分是被模糊过的（就像那片绿色是毛玻璃） 那个放大缩小完全是多余的……但我也懒得做什么复杂的效果去表现 realtime 了……
anson0370
2013 年 10 月 4 日
@anson0370 打错字了orz [问题]更正为[文字]
HiVPS
2013 年 10 月 4 日
@yangqi 我们能看到你的支付宝账号和IP信息，请不在再进行无意义的whmcs破解了，否则我们会走法律途径
fanzeyi
2013 年 10 月 4 日
在 Chrome 31 里叫 #enable-experimental-web-platform-features
anson0370
2013 年 10 月 4 日
@fanzeyi 都已经31了吗orz……
fanzeyi
2013 年 10 月 4 日
@anson0370 在 beta channel 里 ;)
zenozeng
2013 年 10 月 6 日
可以看看这个：http://css-plus.com/2012/03/gaussian-blur/
anson0370
2013 年 10 月 7 日
@zenozeng thx，不过关键还是在于对元素的部分内容进行实时 blur ，这样才能做毛玻璃的遮罩效果

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://study.congcong.us/t/84483

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX