iPhone 14 Pro 详情页浅析

[gaoryrt]

这篇主题是 iPhone 14 Pro
可以写个系列了……
一样的，苹果页面向来会做特别多操作系统、设备、语言、可用性上的兼容（which is good），本次测试也没法全测，所以用的机器是 MacOS 10.15.7，浏览器也是自家的 Safari 15.0，希望这个是他们的目标环境

[gaoryrt]

3个域，79个资源，14.7M，第二次加载还是用了 7M，除了 html 之外还有个巨大的 mp4，用来做首屏的动画：

同样的，一个视频四张图做 fallback：

[gaoryrt]

跟随滚动的文字渐变还是用了 mixed-blend-mode，配合一张渐变的背景就完事儿了：

[gaoryrt]

你以为这是个字母o，但是他是一个border修改宽度实现的：

[gaoryrt]

几个简单的css动画：

自定义一个 progress：

里面用 mask-image 来做遮罩：

[gaoryrt]

切颜色这里用的是 opacity transition

[gaoryrt]

这个就很暴力了，直接五张图一人一个 matrix 跟随滚动变化：

再夸一句，alt 写得很仔细

[gaoryrt]

传统艺能来了，滚动控制mp4帧动画，源文件在这里：
https://www.apple.com.cn/105/media/us/iphone-14-pro/2022/a3e991f3-071e-454c-b714-1b2319bb97a8/anim/a16/large.mp4

[gaoryrt]

简单的 css 动画，用了个伪元素 + mix-blend-mode

改这个 width 值就行

[gaoryrt]

就差不多了，等我看完整个页面又加载了：