在这个不平凡的八月,你会爱上这个烟花

我正在参加「创意开发 投稿大赛」详情请看:掘金创意开发大赛来了!

活动接近尾声了,就给大家整个烟花玩玩吧。

烟花制作工艺

首先我们搭好一个炮台:

image.png

将烟花爆炸后的状态绘制出来:

image.png

如何动起来?

page1.gif

这个是散射的,我们需要直射到天空,再boom!散射开来,安排:

page2.gif

如何生成烟花爆炸后的位置

前面我们烟花的位置是手动写死的,那如果我想放的烟花是下面这种的呢?我得写多少个css啊?

image.png

怎么办呢?

之前写过一个生成图片box-shadow字符串的程序:

image.png

把这串复制过来用:

page7.gif

啊!有瑕疵,不过问题不大。

烟花变字,掘友你好

首先用canvas把要展示的字画出来(这很多此一举,但是好玩啊)

image.png

右键保存图片到本地,运行image2css程序(这是我闲来无聊做的一个很没必要的小小自用工具~):

image.png

这边还打印出了具体有多少个阴影。我们复制过来:

image.png

我们需将炮台改成1px,这样才能清晰展现。点击发射:

image.png

page6.gif

哈哈,有瑕疵!但问题不大。

码上掘金

github

生成box-shadow字符串代码仓库:image2css

在线体验: image2css.vercel.app

欢迎帮我优化优化刚刚那些瑕疵~

结语

赶上活动末班车,希望大家多多支持,喜欢就点个赞呗!

猜你喜欢

转载自juejin.im/post/7130386517008056328