聊聊CSS中的黑科技
@可乐 2018.3
@可乐
腾讯互娱TGIdeas
朋友圈晒娃狂魔
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4734432/a2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4741465/ewm.png)
一句话讲一个鬼故事
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4753434/s11111.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4737930/5b0aa318ff4dafa96ebac49dd9e8a.gif)
唯耐心不负所爱
2017 腾讯UP发布会 互动H5
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4752596/0.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4739313/h1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4727489/1494313503_37_w835_h786.jpg)
方案一
将线稿分层绘制到canvas上,并顺序显示
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4727589/1494381063_16_w342_h230.gif)
生硬、不自然
方案二
从表现力方面考虑,尝试用视频的方式来演绎这一过程
1.视频修改的成本太高
2.文件体积过大,最终压缩后的视频50M+
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4727632/1494384477_28_w150_h252.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4730499/v1.png)
CSS3 Animation + SVG
线条动画
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4758190/grow_gif.gif)
Basic Example of SVG Line Drawing
CREATED BY Chris Coyier
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4758207/basicsvg_gif.gif)
stroke-dasharray
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4739356/svg3.png)
stroke-dashoffset
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4739457/svg5.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4741678/svg5.png)
可视区域
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4758291/grow-all-gif.gif)
动画延时 = 路径的序号*动画持续时间
OneByOne
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4741823/path1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4741928/path9.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4742083/path10.png)
黑科技?
想象力&创造力
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4758386/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4758388/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4758389/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4758390/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4758402/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4758403/pasted-from-clipboard.png)
A Single Div
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4758409/WX20180331-110020_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4758411/WX20180331-110343_2x.png)
a CSS drawing project by Lynn Fisher
Bruce Lee
CREATED BY Mikael Ainalem
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4758415/WX20180331-110848_2x.png)
One Div Mario
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4706746/mq.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4707109/m2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4707446/m3.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4745294/c1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4745297/c2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4745320/mm2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4745329/mm3.png)
透明
透明
#ce294a
@keyframes super {
5%,55%,100%{
--color-1:#fff;
--color-2:#ce294a;
--color-skin:#f7a58d;
--color-boots:#7b5239;
--color-button:#ffe392;
}
三个圆
脑洞时间
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4702143/e5da6e35dd1b4ecb8d766e72b69214a1.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4705845/t1.jpg)
Q&A
聊聊CSS中的黑科技offline
By Kola Wang
聊聊CSS中的黑科技offline
- 4,384