有一天，我遇到了一个奇特的路灯，眼里一下子有了光【CSS畅想】
灵感来源
我对系列这个词的执着来源于大学时代看小说的习惯，看书爱看系列文。于是我也喜欢把自己写的文章分分类，比如「工作小记」、「经验总结」等。当然了它们学会自己成长之后，就演变成另一个专业词汇叫做「文章专栏」。
我们在听评书的时候，经常听到一句经典的词叫做“花开两朵，各表一支”。八月的更文，显然一个系列是无法展示我的「三十年前端功力」，所以根据文章内容，我划分出几个系列：
- 「趣学前端」
- 「CSS畅想」
- 「JS拾忆」
- 「小课堂」
- 「皎皎React」
- ......
每个系列会根据一周的心情随机出现，无迹可寻。不过，「CSS畅想」系列说因为它充满了奇思妙想，所以在双休日出现的频率会很好。
今日主角
有一天，我坐着公交，行驶在熟悉的街道上。突然，我偶遇了一个特别的路灯，长长的灯底座，圆圆的小脑袋，虽然是白天，但是我脑海里已经还是幻想它点亮的样子，一节一节的点亮，像一只跳芭蕾的白天鹅，慢慢舒展着身姿。
想到可以用CSS实现它并点亮它，我眼里一下子就有了光。
两种模式
路灯的功能，我设计了两种模式分别是白昼和黑夜。
- 白昼模式下，灯有外形但是不会发光；
- 黑夜模式下，灯不但兼有外形还能发出明亮的光。
白昼的灯
偶尔瞥见的灯，成了我的新的灵感来源。它主要包括四个部分，灯泡、灯罩、灯架、灯杆。
灯泡
内层的灯泡是圆球形状的。
<div class="lamp-head-inner"></div>灯罩
- 灯泡外侧有网状的灯罩，灯罩由四个圈，每个圈进行了旋转处理，组成出交错的效果；
- 灯罩外圈是8个小号的灯泡，将灯泡穿过灯罩上的圈进行固定。
<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;
}
});在线预览
完整代码已经放到了在线预览平台上了。可在线查看效果，也可以看完整代码。
为它写诗
我热爱发现和探索，也喜欢将每一个发现记录下来，记录在一个叫「每日小诗」的本子里。
信步无明月，孤星耀长空。
似有一长灯，天地独晦明。
预告
周末果然让我充盈着灵感，但是时光飞逝的也非常快。明天进入工作日的周期，「趣学前端」系列将接替「CSS畅想」成为更文的核心内容了。
作者：非职业「传道授业解惑」的开发者叶一一
简介：「趣学前端」、「CSS畅想」系列作者，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。
- 点赞
- 收藏
- 关注作者
评论（0）