试试用纯CSS绘制灯具

最终效果

五颜六色的灯

编辑灯序的颜色

缘起

最近一个需求，控制成百上千颗LED灯组成的灯阵，让灯阵按预先编排的颜色点亮，实现各种光影特效。实现方式多种多样，由于近期写了很多界面交互上的东西，索性考虑用纯CSS的方式实现。在此顺便提一下，惧怕写前端的都学学vue吧，会让你喜欢上前端开发，而且效率奇高。

绘制一盏灯

需要用到css3里面的一些特性，主要用到flex布局, border-radius,transform等属性。先看代码及其注释：

绘制灯具的样式，亲手试验一下，就会更明白。组件工作完成了，在父组件中引用这个组件，即可实现开篇的效果。对灯具进行色彩编辑，用了一个开源的取色器组件，不复杂，完全可以自己实现。

提升

如果你感兴趣，可以尝试来一个呼吸灯。
来一个更酷的，纯css灯泡 http://www.jq22.com/code963

题外话

写本文目的之一是体验markdown的写作方式。最近本想用go语言创建一个轮子，用于快速开发，尝试了一下还是放弃了。go确实有很多优点，简单易学，生态成熟。放弃go语言，拥抱rust，不过这个学习起来确实有难度。写此文目的，也是打算把学习rust的过程记录下来。