Netflix Blog-令人愉快的用户界面：复活节彩蛋

      这篇文章 Delightful User Interfaces: Easter Eggs    是出自 Netflix Technology Blog

       作者分享了网剧《Marvel’s Jessica Jones》最后一季的预告片标题页上设置的动态图特效的（Easter Eggs）的实现方法。 

       背景中摇摆闪烁的电灯，点击后预告片中的照片由 Jessica Jones和她的朋友,转化为Gregory Sallinge。 而这个特效没有使用视频或者webGL ， 是通过css实现的。相比视频10MB，仅需要10kb的css与722kb 图片， 背景图片由5mb压缩到108kb， 没有对效果产生影响。（这里的kb我理解是byte）

      下面从三个方面介绍了CSS动态图的实现思路：

       1. 开灯效果（Turning on the lights）

         使用animation property 通过三张片（关闭，闪烁，开启）图片的切换实现灯泡打开的效果；

        通过transform （ (rotateX, rotateX, and translate）, 及30帧图片模拟灯泡摇摆。

      2.  灯管特效（Lighting: Flare and Flair）

         border-radius 设置影响边界, and filter: blur(80px) 设置影响区域.  mix-blend-mode: 与背景颜色混合， 效果看上去很棒。

      3.  背景聚焦（Bringing the background to focus）

     使用 clip-path 用一个圆形对图片进行遮挡. 使用 transition，展示背景图片。

     遇到的问题（求助StackOverflow）

     1.  图片不能再某些浏览器分辨率下可以显示，解决方案  ， 将opacity过渡到父元素

   不仅仅是预告片

    UI工程师与设计师的合作将其实现的更为简洁而有创意。