写点什么

「CSS 畅想」有一天,我遇到了一个奇特的路灯,眼里一下子有了光

作者:叶一一
  • 2022-10-16
    北京
  • 本文字数:2203 字

    阅读完需:约 1 分钟

「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;  }});
复制代码

在线预览

完整代码已经放到了在线预览平台上了。可在线查看效果,也可以看完整代码。

https://code.juejin.cn/pen/7129059648300122149

为它写诗

我热爱发现和探索,也喜欢将每一个发现记录下来,记录在一个叫「每日小诗」的本子里。

信步无明月,孤星耀长空。

似有一长灯,天地独晦明。


预告

周末果然让我充盈着灵感,但是时光飞逝的也非常快。明天进入工作日的周期,「趣学前端」系列将接替「CSS 畅想」成为更文的核心内容了。

发布于: 刚刚阅读数: 5
用户头像

叶一一

关注

掘金优秀创作者 2022-09-01 加入

非职业传道受业解惑前端程序媛,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。

评论

发布
暂无评论
「CSS畅想」有一天,我遇到了一个奇特的路灯,眼里一下子有了光_CSS_叶一一_InfoQ写作社区