# Netflix Blog-令人愉快的用户界面：复活节彩蛋
Date: 2019-06-27


      这篇文章 [Delightful User Interfaces: Easter Eggs](https://medium.com/@NetflixTechBlog/delightful-user-interfaces-easter-eggs-ae5e8107d09b)    是出自 [Netflix Technology Blog](https://medium.com/@NetflixTechBlog)

       作者分享了网剧《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.  图片不能再某些浏览器分辨率下可以显示，[解决方案](https://stackoverflow.com/a/15759785)  ， 将opacity过渡到父元素

   **不仅仅是预告片**

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