当我拥有了一个小夜灯,我的CSS副属性被激活了【CSS畅想】

举报
叶一一 发表于 2023/02/16 22:40:42 2023/02/16
【摘要】 今天分享怎么用CSS实现一个小夜灯。

灵感来源

我对系列这个词的执着来源于大学时代看小说的习惯,看书爱看系列文。于是我也喜欢把自己写的文章分分类,比如「工作小记」、「经验总结」等。当然了它们学会自己成长之后,就演变成另一个专业词汇叫做「文章专栏」。

我们在听评书的时候,经常听到一句经典的词叫做“花开两朵,各表一支”。八月的更文,显然一个系列是无法展示我的「三十年前端功力」,所以根据文章内容,我划分出几个系列:

  • 「趣学前端」
  • 「CSS畅想」
  • 「JS拾忆」
  • 「小课堂」
  • 「皎皎React」
  • ......

每个系列会根据一周的心情随机出现,无迹可寻。不过,「CSS畅想」系列说因为它充满了奇思妙想,所以在双休日出现的频率会很好。

今日主角

前段时间,朋友送给我一个掘金小夜灯,之前参加神转折一直无法赢得它,前几天取到快递,还挺惊喜的。

image

拆开之后,方方正正,黄晕且柔和的光,衬托出卧室的温馨,像拥有了一只立体的萤火虫,真的好喜欢。我的看到方方正正的物体,不绘制出来难受的CSS副属性被彻底唤醒了。

夜灯的灯

  • 小夜灯的六个面中,中间的四个面是白色+橙色的组合,比例是11:4,上方的面颜色是纯白,下方的面颜色是纯橙;
  • 每侧的面上都有数字;
  • 通过设置transform-style属性的值为preserve-3d,使小夜灯呈现出立体效果;
  • 通过为每个面设置transform属性的translateX和translateZ的值,实现每个面的不同角度旋转,从而实现一个立方体。
<div class='light' id='light'>
  <div class='lamp lamp-horizontal1' id='lamp'>
    <div class='lamp-box'>
      <div class='surface surface1'>
        <div class='face'>1</div>
        <div class='base'>
          <div class='yoyo'></div>
        </div>
      </div>
      <div class='surface surface2'>
        <div class='face'>2</div>
        <div class='base'></div>
      </div>
      <div class='surface surface3'>
        <div class='base'></div>
        <div class='face'>3</div>
      </div>
      <div class='surface surface4'>
        <div class='face'>4</div>
        <div class='base'></div>
      </div>
      <div class='surface surface5'>
        <div class='face'>5</div>
        <div class='base'></div>
      </div>
      <div class='surface surface6'>6</div>
    </div>
  </div>
  <div class='halo'></div>
</div>

彩蛋

彩蛋时刻,我在第一个页面画了一个小小的YOYO。不过yoyo的小尾巴没有画的特别好,回头研究一下怎么加这个小尾巴。

整体思路就是一个矩形然后顺时针旋转45度,在拍扁一点点。

.yoyo {
  width: 20px;
  height: 18px;
  background: #fff;
  border-radius: 5px 2px 0 2px;
  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: 1px solid #bf7665;
  top: 40%;
  left: 40%;
  margin: -5px 0 0 -5px;
  transform: rotate(-45deg);
}
.yoyo::after {
  content: '';
  position: absolute;
  width: 0px;
  height: 0px;
  border-left: 3px solid #fff;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
  bottom: 0px;
  right: -5px;
}
......
<div class="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秒,实际肯定不是这么短暂的定时,不过为了快速查看效果所以我将定时时间缩短了;
  • 到达定时时间的时候,会将点亮的灯关闭。
// 定时方法
var timer;
// 定时
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);
}

水平旋转

这个翻转效果目前支持水平的四个面进行翻转,不过在翻转的时候保持不动和垂平翻转,我还得研究研究。

// 定时方法
var timer;
function rotateFun(num) {
  num += 1;
  if (num > 4) {
    num = 1;
  }
  return num;
}
// 水平翻转
if (type === 'horizontal') {
  horizontalNum = rotateFun(horizontalNum);
  console.log(horizontalNum, 'horizontalNum');
  lamp.classList = `lamp lamp-horizontal${horizontalNum}`;
}

在线预览

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

为它写诗

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

我不害怕黑暗,

只是,

需要时间,

去适应。

有一天,

我拥有了一个小夜灯。

它用全部的能量,

照亮了我夜。


翻页

翻页,不仅仅代表着一个灵感的完成,还预示着一个新的灵感的诞生。 ——叶一一

我翻开一本叫做「叶一一的CSS畅想」的书,它告诉我明天的主角依旧是灯。但不是台灯、吊灯、霓虹灯。它是城市里不可缺少的灯,它是我曾经诗里的灯。

作者:非职业「传道授业解惑」的开发者叶一一
简介:「趣学前端」、「CSS畅想」系列作者,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。
如果看完文章有所收获,欢迎点赞👍 | 收藏⭐️ | 留言📝。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。