iPhone 12 页面卷动逐行滑入效果

（给程序员的那些事加星标）转自：掘金 -CodingStartup起码课在这里也特别声明一下，这个教学里用到的图片素材都是由 Apple 网站中获取，图片版权归 Apple 所有，这里只用作教学演示用途，大家千万不要将这些图片用于真实的网页中。HTML 的部分打开 CodePen 编辑器，在 HTML 的部份加入标题。由于它有一个副标题，所以我会用 标签去装着它。然后加入一个 ，id 名为 iphone，里面新增两个 ，id 分别是 hardware 和 ui；hardware 会用来显示 iPhone 的机身和边框，而 ui 则会显示画面里面的内容。CSS 的部分先定义一些 CSS，让我们更加清楚知道在做什么。加入 :root 选择器，定义一些变量和样式：--device-width 是 770px--device-height 是 1336px--ui-width 是 640px基础文字大小是 15px然后加入 #iphone 选 ………………………………