聊聊CSS中的黑科技

@可乐 2018.3

@可乐

腾讯互娱TGIdeas

朋友圈晒娃狂魔

一句话讲一个鬼故事

唯耐心不负所爱

2017 腾讯UP发布会互动H5

方案一

将线稿分层绘制到canvas上，并顺序显示

生硬、不自然

方案二

从表现力方面考虑，尝试用视频的方式来演绎这一过程

1.视频修改的成本太高

2.文件体积过大，最终压缩后的视频50M＋

CSS3 Animation + SVG

线条动画

Basic Example of SVG Line Drawing

CREATED BY Chris Coyier

stroke-dasharray

stroke-dashoffset

可视区域

动画延时 = 路径的序号*动画持续时间

OneByOne

黑科技？

想象力&创造力

A Single Div

a CSS drawing project by Lynn Fisher

Bruce Lee

CREATED BY Mikael Ainalem

One Div Mario

透明

#ce294a

@keyframes super {
  5%,55%,100%{
  --color-1:#fff;
  --color-2:#ce294a;
  --color-skin:#f7a58d;
  --color-boots:#7b5239;
  --color-button:#ffe392;
  }