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