纯CSS3实现超酷炫的萤火虫动画

银烛秋光冷画屏,轻罗小扇扑流萤。仲夏之夜，花草从间，萤光舞动，构成一幅诗意的画面。如今用HTML5大显身手，可以做很多有意思的应用和游戏。今天我们要分享一个用纯CSS3做一个萤火虫动画的特效。
先来看看想要的效果，怎样，酷炫吧！然而，这只是张摄影师拍的静态照片，我们用代码实现它，并让萤火虫闪动起来，一起跟我来动手试试吧！

图一 星光下的萤火虫

首先，搭建好基本的HTML结构。从生物学角度看，萤火虫firefly可分为头部head（触须tentacle、眼睛eyes）、胸部pereion、腹部belly，还有两只翅膀wings，因此语义化标签，对其组成拆解，以类划分。

其中，增加了label元素，包围了所有div， for属性绑定checkbox控件input的id，当在label 元素内点击文本时，就会触发控件，浏览器会自动将焦点转到和标签相关的表单控件上，由此checked的true或false，产生点击开启和关闭萤火虫荧光的效果。
好了，基本结构搭建好了，接下来就是强大的CSS3上场了。
本文采用flex弹性盒布局做响应式处理，以方便实现排列、对齐和分配空白空间，布局方式比较灵活。以vh、rem为相对计量单位,这样萤火虫就会根据显示窗口viewport的宽高