这篇博客是 Gregor Adams 讲他如何用 CSS 重现 Netflix 商标效果。Gregor 是 CSS 方面冉冉升起的新星。能在这里分析他的案例也是非常荣幸的。
我尝试使用 Netflix（译者注：一家在线影片租赁提供商）时，立即就把我吸引住了。我观看了一些不得不在它处才能观看的节目。每一集电视剧或者电影都以 Netflix 动画作为开始。
在观看了几集电视剧之后，我想到可以用 CSS 来实现 Netflix 的 logo 动画，于是我看了几部作品之后，就用 CodePen 来重现这个 logo。
第一个概念
因为我想要尝试某些技术方案导致我的第一种实现方式有些累赘。
例如：我想使用纯 CSS 技术来实现它，并且我也想当我点击按钮的时候，这个动画再执行一次，所以我要使用一些不可思议技巧。幸运的是当我写 CSS 代码的时候，总会有一些小技巧会在我的脑海里涌现。
我们来谈论一下实际的动画。
我录下这个动画并且在 Quicktime 中循环播放，这样可以详细检查。我倾向于这么做，能让我停在某些特定帧弄清楚到底发生了什么。
这个商标：
以一个白屏幕开始。 弹出白色的 3D 字母。 投射阴影。 消失。 把字体颜色变成红色。这就是我需要重现的动画步骤。但是这里有另外一些关于这个 logo 的东西需要解决： 字母在商标中心是倾斜的。
大家一直问我如何做到这些。 都是从积累中获取地 :)
我做过许多 3D 案例，所以这对我来说不是很难。
使字母变倾斜
以这个词 “Netflix” 的一些基本标记开始。
N E T F L I X
查看更多关于用CSS实现NetflixLogo动画_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114841