macOS 的网页特效是如何实现的？

[islujw]

1. 在电脑上浏览 macOS 的官网 https://www.apple.com/cn/macos/sierra/ 页面，带宽足够的时候（初始图形是毛玻璃的样子时），会加载出 3D 般的动效。随着页面的滑动，Sierra 山峰与天空之间、前后山峰之间、同一山峰的不同山脊、前方缓缓进入画面的山峰、右上角 Siri 窗口和桌面间、Dock 和桌面间……许多地方都会出现近大远小的运动视觉差。感觉整个 macOS 桌面是立体的三维世界，刚从里面游览了一番出来似的。检索网站资源，发现一些类似蒙版的图片：

   https://images.apple.com/media/ww/macos/2016/c1206bed-9b76-4c2c-ad65-d3647b9ebcbb/overview/hero/textures/mountains.jpg

   https://images.apple.com/media/ww/macos/2016/c1206bed-9b76-4c2c-ad65-d3647b9ebcbb/overview/hero/textures/mountains_alpha.png

   https://images.apple.com/cn/macos/sierra/overview/hero/ui.jpg

   https://images.apple.com/cn/macos/sierra/overview/hero/ui_alpha.png

   这是如何实现的？

2. 继续往下滑，在「还能让 Siri 解决更多问题吗？没问题。」那个区块，不停歇的 Siri 动画，这又是如何实现的（应该不是图片吧）？

[oneonesv]

第一个是利用多张图片缩放视差
第二个是 canvas

[shiji]

1. 这个实在太常见了，CSS 的基础部分就能学到。

所谓的蒙版素材：
那些素材是可以通过 CSS 剪切成一块块的形状的。discuz phpwind 什么的都是这样。如果分开加载浪费服务器资源。

[islujw]

@zxyawx 谢啦～我先去研究一下 ^^

[islujw]

@zxyawx 我以为是 perspective 属性。因为 macOS 网页即将更新了，所以去保存一份。发现第一个也是 canvas …… 那么 perspective 也可以做到吗？