聊聊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
Bruce Lee
CREATED BY Mikael Ainalem
Mario
透明
透明
#ce294a
@keyframes super {
5%,55%,100%{
--color-1:#fff;
--color-2:#ce294a;
--color-skin:#f7a58d;
--color-boots:#7b5239;
--color-button:#ffe392;
}
三个圆
谢谢!
Copy of 聊聊CSS中的黑科技
By Kola Wang
