灵感来源
我对系列这个词的执着来源于大学时代看小说的习惯，看书爱看系列文。于是我也喜欢把自己写的文章分分类，比如「工作小记」、「经验总结」等。当然了它们学会自己成长之后，就演变成另一个专业词汇叫做「文章专栏」。
我们在听评书的时候，经常听到一句经典的词叫做“花开两朵，各表一支”。八月的更文，显然一个系列是无法展示我的「三十年前端功力」，所以根据文章内容，我划分出几个系列：
- 「趣学前端」
- 「CSS畅想」
- 「JS拾忆」
- 「小课堂」
- 「皎皎React」
- ......
每个系列会根据一周的心情随机出现，无迹可寻。不过，「CSS畅想」系列说因为它充满了奇思妙想，所以在双休日出现的频率会很好。
今日主角
有一天，我坐着公交，行驶在熟悉的街道上。突然，我偶遇了一个特别的路灯，长长的灯底座，圆圆的小脑袋，虽然是白天，但是我脑海里已经还是幻想它点亮的样子，一节一节的点亮，像一只跳芭蕾的白天鹅，慢慢舒展着身姿。
想到可以用CSS实现它并点亮它，我眼里一下子就有了光。
两种模式
路灯的功能，我设计了两种模式分别是白昼和黑夜。
- 白昼模式下，灯有外形但是不会发光；
- 黑夜模式下，灯不但兼有外形还能发出明亮的光。
白昼的灯
偶尔瞥见的灯，成了我的新的灵感来源。它主要包括四个部分，灯泡、灯罩、灯架、灯杆。
灯泡
内层的灯泡是圆球形状的。
<divclass="lamp-head-inner"></div>
灯罩
- 灯泡外侧有网状的灯罩，灯罩由四个圈，每个圈进行了旋转处理，组成出交错的效果；
- 灯罩外圈是8个小号的灯泡，将灯泡穿过灯罩上的圈进行固定。
<divclass="lamp-head-starlight lamp-head-starlight1"></div><divclass="lamp-head-starlight lamp-head-starlight2"></div><divclass="lamp-head-starlight lamp-head-starlight11"></div><divclass="lamp-head-starlight lamp-head-starlight12"></div><divclass='lamp-head-grid'id='lampHeadGrid'><divclass='head-grid-light head-grid-light1'></div><divclass='head-grid-light head-grid-light2'></div><divclass='head-grid-light head-grid-light3'></div><divclass='head-grid-light head-grid-light4'></div><divclass='head-grid-light head-grid-light5'></div><divclass='head-grid-light head-grid-light6'></div><divclass='head-grid-light head-grid-light7'></div><divclass='head-grid-light head-grid-light8'></div></div>
灯架
灯架链接灯泡和灯杆，由两侧的弯曲支架和中间的铁块组成。
<divclass='lamp-pedestal'><divclass='lamp-pedestal-line1'></div><divclass='lamp-pedestal-line2'></div><divclass='lamp-pedestal-line3'></div><divclass='lamp-pedestal-line4'></div></div>
灯杆
- 灯杆分成了三段，为了后面的分段点亮效果；
- 每段灯杆中，都有三根灯柱。
<divclass='lamp-pillar pillar-active'><divclass='pillar-part pillar-part1'id='pillarPart1'><divclass='pillar-line pillar-line1'></div><divclass='pillar-line pillar-line2'></div><divclass='pillar-line pillar-line3'></div></div></div>
黑夜的光
夜幕降临，华灯初上。
开
黑夜模式下，打开呈关闭状态的灯。一般城市的灯会在夜晚的某个时间点统一打开。
我设计的开灯效果是逐步点亮。从灯杆往上一直到灯罩上的小灯。
- 当灯是关闭状态时可以点亮；
- 灯杆分成了三段，从下到上，逐步点亮；
- 灯杆全部点亮之后，点亮灯泡；
- 灯泡之后，灯罩的上一圈小灯一起点亮。
btnOn.addEventListener('click', () => { if (!lightFlag) { btnOn.classList.toggle('active'); btnClose.classList.remove('active'); pillarPart3.classList.add('pillar3-active'); setTimeout(function () { pillarPart2.classList.add('pillar2-active'); }, 2000); setTimeout(function () { pillarPart1.classList.add('pillar1-active'); }, 4000); setTimeout(function () { lampHead.classList.add('lamp-head-active'); }, 6000); setTimeout(function () { lampHeadGrid.classList.add('lamp-head-grid-active'); lightFlag=true; }, 8000); } });
关
白昼模式下，其实就是关闭已打开的灯。一般城市的灯会在早晨的某个时间点统一关闭。
- 当灯是点亮状态时可以关闭；
- 一次性会把全部的灯关闭。
btnClose.addEventListener('click', () => { if (lightFlag) { btnClose.classList.toggle('active'); btnOn.classList.remove('active'); lampHeadGrid.classList.remove('lamp-head-grid-active'); lampHead.classList.remove('lamp-head-active'); pillarPart1.classList.remove('pillar1-active'); pillarPart2.classList.remove('pillar2-active'); pillarPart3.classList.remove('pillar3-active'); lightFlag=false; } });
在线预览
完整代码已经放到了在线预览平台上了。可在线查看效果，也可以看完整代码。
为它写诗
我热爱发现和探索，也喜欢将每一个发现记录下来，记录在一个叫「每日小诗」的本子里。
信步无明月，孤星耀长空。
似有一长灯，天地独晦明。
预告
周末果然让我充盈着灵感，但是时光飞逝的也非常快。明天进入工作日的周期，「趣学前端」系列将接替「CSS畅想」成为更文的核心内容了。
