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畅想」成为更文的核心内容了。