我正在参加「创意开发 投稿大赛」详情请看:掘金创意开发大赛来了!
活动接近尾声了,就给大家整个烟花玩玩吧。
烟花制作工艺
首先我们搭好一个炮台:
将烟花爆炸后的状态绘制出来:
如何动起来?
这个是散射的,我们需要直射到天空,再boom!散射开来,安排:
如何生成烟花爆炸后的位置
前面我们烟花的位置是手动写死的,那如果我想放的烟花是下面这种的呢?我得写多少个css啊?
怎么办呢?
之前写过一个生成图片box-shadow字符串的程序:
把这串复制过来用:
啊!有瑕疵,不过问题不大。
烟花变字,掘友你好
首先用canvas把要展示的字画出来(这很多此一举,但是好玩啊)
右键保存图片到本地,运行image2css程序(这是我闲来无聊做的一个很没必要的小小自用工具~):
这边还打印出了具体有多少个阴影。我们复制过来:
我们需将炮台改成1px,这样才能清晰展现。点击发射:
哈哈,有瑕疵!但问题不大。
码上掘金
github
生成box-shadow字符串代码仓库:image2css
在线体验: image2css.vercel.app
欢迎帮我优化优化刚刚那些瑕疵~
结语
赶上活动末班车,希望大家多多支持,喜欢就点个赞呗!