开源分享|两个代码小白做了一棵圣诞树……

圣诞节要到了，OpenSCA运营团队在Github发现了一个开源的表单圣诞树项目（仓库地址：https://github.com/hakimel/DOM-Tree）。它是用HTML和JS编写的，由各式各样的表单和单选按钮组成。

经过团队几位代码小白的亲自盖章及联合尝试，使用该项目做一棵自己的圣诞树并不复杂。

所以，我们做了一棵圣诞树送给大家，并将整个过程记录在这里，希望能为大家带去一些欢乐。

首先，让我们记住这棵树刚开始的样子，选中按钮样式的雪花，进度条、表单、下拉框等组成的树叶，看起来有些杂乱在身上。

第一步，为了减少凌乱感，我们调整了单个表单“树枝”的高度，并减少了其种类。

在源码中的这一段可以发现定义高度的参数。

先把高度设为 40，看看效果：

高度差不多后开始解决种类多导致的凌乱的问题。定义表单数量和类型的代码也很好找。

数量改为10并把类型改为仅剩“text”之后，填入圣诞快乐的文案，它变成了这个样子……

好像太过了，换成60之后看起来比较像一棵健壮的圣诞树了~

下一步改造的是“雪花”。源码中雪花的实现方式是：

其实就是一堆“圆点单选框”，选中和未选中两种状态同时存在；利用圆点单选框的形状和特性，加上动态旋转的效果，营造了一种雪花的感觉。箭头所指的位置分别定义了雪花的变量类型和选中状态。

随便改了一下突然emmmmm：

改成 button 的话又变成了下雨。

还是未选中的 radio最像雪。修改这里的参数为 1 或以上的任何数字，它就全部都不会是选中状态了~

接下来是树的颜色。看起来单个表单的外观似乎没有封装进负责整体修饰的.css 文件里。回到.html 文件里找到表单对应的片段，在段落中插入这行代码：

绿色圣诞树get！

文字看起来稍显单调，能不能加上emoji呢？

带着专属祝福及emoji的成品出现啦：

OpenSCA项目组祝大家圣诞节快乐！所有代码都安全！每天都是平安夜！

我们还为大家准备了一个圣诞节小活动，留言或私信跟我们分享使用OpenSCA的体验和反馈，项目组将从中抽取三位送上真的小圣诞树一棵~

 

---

GitHub：

https://github.com/XmirrorSecurity/OpenSCA-cli/releases 

Gitee：

https://gitee.com/XmirrorSecurity/OpenSCA-cli/releases 

OpenSCA官网：

https://opensca.xmirror.cn/