先看演示
Demo页面
基本代码
全部的代码可以在上面的Demo页面查看，由于交互部分的代码是AI生成的，所以我就不多讲了。
样式和滤镜部分最初也是由AI生成，但效果不佳。最终经过我的手动修改才成为现在的样子，所以下面只贴出来我认为最关键的内容。
CSS：
原理很简单，首先要有一个“镜片”，再建一个背景图的复制层，将它包含在镜片中，根据镜片的位置，由JS动态控制背景的相对位置。
再在镜片的外面套一个容器，以实现圆角和边框。
.background {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url('https://framerusercontent.com/images/hhFYtfYnlg7nQS1FB5AMza1gQ.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.lens-container {
position: fixed;
width: 200px;
height: 200px;
cursor: grab;
user-select: none;
z-index: 10;
overflow: hidden;
box-size:content-box;
border: 2px solid rgba(255, 255, 255, .3);
backdrop-filter: blur(2px);
border-radius: 20px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.lens-container:active {
cursor: grabbing;
}
.lens {
width: 200px;
height: 200px;
overflow: hidden;
filter: url(#lensFilter);
position: relative;
}
.lens-background {
position: absolute;
width: 100vw;
height: 100vh;
background-image: url('https://framerusercontent.com/images/hhFYtfYnlg7nQS1FB5AMza1gQ.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
svg-filter：
注释中已经写得很明白了，就是将镜片的形状缩小并模糊以形成用于变型的位移贴图遮罩，然后使用这个位移遮罩去变形已经做过基本模糊的背景图。
<svg style="position: absolute; width: 0; height: 0;">
<defs>
<!-- 透镜效果滤镜 -->
<filter id="lensFilter" x="-50%" y="-50%" width="200%" height="200%">
<!--基本模糊-->
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
<!--内缩形状并模糊形成变形遮罩-->
<feMorphology in="SourceAlpha" operator="erode" radius="20" result="erodedAlpha"/>
<feGaussianBlur in="erodedAlpha" stdDeviation="20" result="lensProfileAlphaRaw"/>
<!--变形图案-->
<feDisplacementMap in="blur" in2="displacementMapSource" scale="40"
xChannelSelector="A" yChannelSelector="A" result="displacedImage"/>
</filter>
<!-- 波纹效果滤镜 -->
<filter id="rippleFilter" x="-50%" y="-50%" width="200%" height="200%">
<feTurbulence baseFrequency="0.02" numOctaves="3" result="turbulence"/>
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="15" result="displaced"/>
<feGaussianBlur in="displaced" stdDeviation="0.5"/>
</filter>
<!-- 位移贴图 -->
<radialGradient id="displacementMap" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#808080"/>
<stop offset="30%" stop-color="#808080"/>
<stop offset="100%" stop-color="#404040"/>
</radialGradient>
</defs>
</svg>更具体的机制都可以在Demo页的源码中找到。
感想
关于这次苹果的液态玻璃效果，可以说是骂声一片。但从设计的角度，我是这么想的——
设计是一种语言。
而语言的特点是，不管多难听，说明白事就行。
但同时就像听一个人说话就能了解他的品格，看产品的设计就能了解它的品质。
苹果的设计可以说一直走在世界的前列，好或不好且不说，它总是能够在一段时间内引导潮流。
作为苹果这么多用户的产品，每次改变UI，其意义和改变VI是一样重大的。改VI相当于改头换面向潜在用户宣传，而改UI就相当于以全新面貌跟既有用户说话。
而语言的另一个特点，是可以洗脑和筛选受众。
就算说得再难听，只要能说明白，而且大声说不停说，用户总有一天会接受。
不管你今天怎么骂液态玻璃，总有一天还是要升级，你开发的应用还是要去适应它。
既有用户不太可能会被这个特点“恶心走”，反而会吸引更多喜欢炫酷的潜在用户。
所以苹果的这次UI改版，就算是你觉得再难看，它始终会是个成功的设计。
当然，我只是说成功的设计，成功的设计不代表成功的产品。
就我多年设计行业的经验来看，当一个产品开始改UI，往往就说明它在产品上最近没有新点子了。
灵动岛交互的修改/被骂/被接受是因为硬件技术上的变动，可以理解。可UI质感层面？
这完全是在炫技和烧性能，还会带来软件开发者、设计者、宣传者各方不必要的麻烦，所以从另一个角度来说，骂得对。
再来说说UI统一性。
苹果的这次改版，或者说每次改质感，都是在引导图标和界面趋向风格统一，即“看起来整齐”，这其实是源于一种控制欲，大概和校长们要求学生穿校服是一样的心态。
统一且炫酷的好处是给用户满满的“逼格”感，有一种层次优越的虚荣。 但平台的存在感增强，就意味着应用的存在感会被削弱。
作为一个操作系统，应用的图标本来是各显所长，谁更炫谁就出众。
苹果这一改，审美上不跟风的就会变成异类。
这似乎也反映了苹果的应用已经足够饱和，它不再是那个炫耀应用上亿的市场平台了，而是一家只生产你必须削掉脚后跟才能穿上他指定的水晶鞋的皇家工厂。
所以从这次改版中，我看到的是应用开发和产品设计的更严格筛选，用户和非用户的更加分化。
当然，苹果有这个让开发者往死里卷的底气和资格，其实未尝不是一件好事。
只希望安卓和Windows开发者们，好好利用这次筛选机会，求求你们别跟风了……
为啥不要跟风，因为你根本学不像，哪怕一模一样甚至效果更好也“不像”。只要跟风你就中了它的套，不如坚持自己风格。
反正跨平台开发者们注定要卷了，就不要让它们更加卷了。
各平台有自己的审美理念才是更有效的作法，苹果把自己筛选上去了，吃剩的都是大家的啊。 在这个阶段如果在功能和生态上发展并超过苹果，那才是更优秀的竞争路线。
说归说，这个效果还是要学一下的，至少可以带来很多启发，所以就有了上面的Demo。
如果你觉得本文对你有哪怕是一丁丁丁点启发帮助，或者单纯愿意发善心可怜可怜我，谢谢大佬请我一杯咖啡。
当然如果你不想的话，随手用微信打赏个红包砸死我也可以。
同时欢迎关注X @Tresmort “喵爸有毒”。
是的，我有毒。
