Netflix 简介动画 - 纯 CSS

嘿大家，

最近，我仅使用 CSS 克隆了 Netflix 的介绍动画，并收到了一些很好的反馈，因此我认为最好能逐步分享一些有关动画开发过程的信息。

那么我们开始吧！

HTML结构

首先，我映射了 Netflix 徽标中的字母，并将它们分开，以便我可以将其用作稍后定位 HTML 元素的基本参考。

在 HTML 中，我创建了一个带有 4 个名为 helpers 的子 div 的容器，每个 helpers 被指定为动画字母的一个“侧面”，例如，为 N 字母制作动画，将使用 3 个 helpers，因为 N 被分为 3 个独立的部分，像这样 👉 I\I

话虽如此，考虑到在容器 div 中我们有一个名为“ letter”的属性，我使用了我们在上一步中导出的图像，并且它准确地放置在“ letter”属性中每个值的辅助 div 应该所在的位置，它支持来自“NETFLIX”名称的所有字母。

动画

现在该关注动画部分了。动画主要由三个步骤组成。第一部分是字母各个侧面逐渐淡出，直到第二部分，主要由许多不同宽度和颜色的垂直“灯光”组成，这些灯光从字母的最后一侧出现，同时逐渐淡出。第三部分是灯光消失时应用的摄像机运动——但这部分是最简单的。

第一部分（逐渐消失）

褪色效果与用画笔“褪色”字母的效果非常相似。为了复制这种效果，我们必须意识到画笔的笔尖形状并不统一，有些笔尖是由尼龙和聚酯纤维制成的。
为此，我们必须创建一个“不规则”的渐变效果。我用 Photoshop 制作了以下画笔效果：

之后，我将渐变的每个小块都创建成了 HTML 辅助元素，这些小块被命名为“毛皮”，每个“毛皮”都对应一个单独的“span”标签。如图所示，每块毛皮都有不同的渐变效果，这些效果也复制到了 CSS 文件中。

创建这个不规则渐变后，我使用简单的 CSS 关键帧动画使它们移动，每个助手都有自己的延迟设置来一个接一个地启动。

第二部分（彩灯）

灯光背后的想法类似于画笔。但是，它不是将每个小块毛发与渐变背景混合，而是将每个灯光以随机的纯色作为背景，并带有一个用于照明效果的盒状阴影。

为了让灯光在靠近时“避开相机”，我们创建了一个带有关键帧动画的随机运动，使它们侧向移动，在灯光中间打开一个空隙。

第三部分（镜头运动）

相机运动也使用关键帧动画来复制，但这次操作的 css 属性是主 HTML 容器的比例，因此看起来相机正在放大字母，而所有其他动画都在同时播放。

结论

最难的部分是如何协调所有动画，使其在正确的时间播放，因此“动画延迟”在这些场景中扮演着重要的角色。我在动画中采用的方法是确保动画可以在不同的背景颜色，甚至不同的字母颜色下播放，只需更改 SASS 变量，所有动画仍能正常工作。
代码还可以通过多种方式进行优化，所以如果你愿意，可以随意尝试。

就这些了，希望这篇文章能帮到大家。=)