灵感来源
我对系列这个词的执着来源于大学时代看小说的习惯，看书爱看系列文。于是我也喜欢把自己写的文章分分类，比如「工作小记」、「经验总结」等。当然了它们学会自己成长之后，就演变成另一个专业词汇叫做「文章专栏」。
我们在听评书的时候，经常听到一句经典的词叫做“花开两朵，各表一支”。八月的更文，显然一个系列是无法展示我的「三十年前端功力」，所以根据文章内容，我划分出几个系列：
- 「趣学前端」
- 「CSS畅想」
- 「JS拾忆」
- 「小课堂」
- 「皎皎React」
- ......
每个系列会根据一周的心情随机出现，无迹可寻。不过，「CSS畅想」系列说因为它充满了奇思妙想，所以在双休日出现的频率会很好。
今日主角
前段时间，朋友送给我一个掘金小夜灯，之前参加神转折一直无法赢得它，前几天取到快递，还挺惊喜的。
拆开之后，方方正正，黄晕且柔和的光，衬托出卧室的温馨，像拥有了一只立体的萤火虫，真的好喜欢。我的看到方方正正的物体，不绘制出来难受的CSS副属性被彻底唤醒了。
夜灯的灯
- 小夜灯的六个面中，中间的四个面是白色+橙色的组合，比例是11：4，上方的面颜色是纯白，下方的面颜色是纯橙；
- 每侧的面上都有数字；
- 通过设置transform-style属性的值为preserve-3d，使小夜灯呈现出立体效果；
- 通过为每个面设置transform属性的translateX和translateZ的值，实现每个面的不同角度旋转，从而实现一个立方体。
<divclass='light'id='light'><divclass='lamp lamp-horizontal1'id='lamp'><divclass='lamp-box'><divclass='surface surface1'><divclass='face'>1</div><divclass='base'><divclass='yoyo'></div></div></div><divclass='surface surface2'><divclass='face'>2</div><divclass='base'></div></div><divclass='surface surface3'><divclass='base'></div><divclass='face'>3</div></div><divclass='surface surface4'><divclass='face'>4</div><divclass='base'></div></div><divclass='surface surface5'><divclass='face'>5</div><divclass='base'></div></div><divclass='surface surface6'>6</div></div></div><divclass='halo'></div></div>
彩蛋
彩蛋时刻，我在第一个页面画了一个小小的YOYO。不过yoyo的小尾巴没有画的特别好，回头研究一下怎么加这个小尾巴。
整体思路就是一个矩形然后顺时针旋转45度，在拍扁一点点。
.yoyo { width: 20px; height: 18px; background: #fff;border-radius: 5px2px02px; transform: rotate(45deg) scale(0.8, 1); position: absolute; top: 10px; left: 50%; margin-left: -10px; } .yoyo::before { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff;border-bottom: 1pxsolid#bf7665;top: 40%; left: 40%; margin: -5px00-5px; transform: rotate(-45deg); } .yoyo::after { content: ''; position: absolute; width: 0px; height: 0px; border-left: 3pxsolid#fff;border-bottom: 2pxsolidtransparent; border-top: 2pxsolidtransparent; border-right: 2pxsolidtransparent; bottom: 0px; right: -5px; } <divclass="yoyo"></div>
夜灯的夜
实现了小夜灯的外形，接下来就是可以点亮的操作了。另外因为掘金的小夜灯有定时关闭的功能，所以我也设置了定时功能。
开
- 当灯是关闭状态时可以点亮；
- 因为有定时功能，所以在打开灯的同时要清除定时。
// 打开if (!lightFlag&&type==='btnOn') { light.classList.add('light-active'); lightFlag=true; // 清除定时clearTimeout(timer); }
关
- 当灯是点亮状态时可以关闭；
- 因为有定时功能，所以在关闭灯的同时要清除定时。
// 关闭if (lightFlag&&type==='btnClose') { light.classList.remove('light-active'); lightFlag=false; // 清除定时clearTimeout(timer); }
定时
- 两个定时时间，5秒和30秒，实际肯定不是这么短暂的定时，不过为了快速查看效果所以我将定时时间缩短了；
- 到达定时时间的时候，会将点亮的灯关闭。
// 定时方法vartimer; // 定时if (!timeFlag&& (type==='timing5'||type==='timing30')) { lightFlag=true; timeFlag=true; light.classList.add('light-active'); timer=setTimeout(function () { lightFlag=false; timeFlag=false; light.classList.remove('light-active'); }, time); }
水平旋转
这个翻转效果目前支持水平的四个面进行翻转，不过在翻转的时候保持不动和垂平翻转，我还得研究研究。
// 定时方法vartimer; functionrotateFun(num) { num+=1; if (num>4) { num=1; } returnnum; } // 水平翻转if (type==='horizontal') { horizontalNum=rotateFun(horizontalNum); console.log(horizontalNum, 'horizontalNum'); lamp.classList=`lamp lamp-horizontal${horizontalNum}`; }
在线预览
https://code.juejin.cn/pen/7128742794356588557
为它写诗
我热爱发现和探索，也喜欢将每一个发现记录下来，记录在一个叫「每日小诗」的本子里。
我不害怕黑暗，
只是，
需要时间，
去适应。
有一天，
我拥有了一个小夜灯。
它用全部的能量，
照亮了我夜。
翻页
翻页，不仅仅代表着一个灵感的完成，还预示着一个新的灵感的诞生。 ——叶一一
我翻开一本叫做「叶一一的CSS畅想」的书，它告诉我明天的主角依旧是灯。但不是台灯、吊灯、霓虹灯。它是城市里不可缺少的灯，它是我曾经诗里的灯。
