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 ( (rotateXrotateX, 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工程师与设计师的合作将其实现的更为简洁而有创意。

 

 

Be First to Comment

发表回复