前言

某天，我正在夜跑，一抬头，远处的高楼大厦，星光闪闪，于是我有了一个创意。

接下来，我分享一下如何用CSS实现3D翻转和城市星河。

城市星河

星河璀璨

一个标签，轻松实现繁星效果。

只需要一个 2px * 2px 的 DIV 即可，剩下的就交给 box-shadow。

box-shadow 不仅可以画心，还可以画星星。

.stars {
  width: 2px;
  height: 2px;
  border-radius: 100%;
  box-shadow: 10px 0px #cfcfc6, 40px 2px #cfcfc6, 70px 0px #cfcfc6, 110px 3px #cfcfc6, 140px 0px #cfcfc6, 190px 2px #cfcfc6, 240px 0px #cfcfc6, 270px 5px #cfcfc6, 320px 0px #cfcfc6, 5px 20px #cfcfc6, 50px 24px #cfcfc6, 100px 30px #cfcfc6, 120px 30px #cfcfc6, 150px 24px #cfcfc6, 180px 30px #cfcfc6, 240px 24px #cfcfc6, 270px 26px #cfcfc6, 300px 30px #cfcfc6, 10px 40px #cfcfc6, 40px 45px #cfcfc6, 70px 45px #cfcfc6, 110px 44px #cfcfc6, 140px 48px #cfcfc6, 2px 50px #cfcfc6, 30px 55px #cfcfc6, 60px 60px #cfcfc6, 90px 70px #cfcfc6, 130px 68px #cfcfc6, 2px 70px #cfcfc6, 20px 77px #cfcfc6, 40px 66px #cfcfc6, 60px 80px #cfcfc6, 100px 90px #cfcfc6, 150px 80px #cfcfc6, 180px 70px #cfcfc6, 200px 80px #cfcfc6, 230px 77px #cfcfc6;
  position: absolute;
}

城市灯火

同样是一个标签，实现灯火通明的大厦效果。

灯火样式和楼层样式，均使用伪元素实现。

灯火效果，使用 box-shadow，基本繁星效果一摸一样。

楼层效果，也使用 box-shadow，不过楼层是竖线，所以需要 设置和父元素等长的高度。

.builds {
  width: 70px;
  height: 160px;
  border-radius: 5px 5px 0 0;
  background: #193f71;
  position: absolute;
  overflow: hidden;
}
.builds::after {
  content: '';
  position: absolute;
  top: 0;
  width: 2px;
  height: 2px;
  border-radius: 100%;
  background: transparent;
  box-shadow: 25px 10px #5e9cbd, 24px 60px #5e9cbd, 20px 70px #5e9cbd, 18px 90px #5e9cbd, 23px 120px #5e9cbd, 23px 140px #5e9cbd, 36px 28px #5e9cbd, 36px 70px #5e9cbd, 36px 160px #5e9cbd, 46px 10px #5e9cbd, 50px 60px #5e9cbd, 42px 90px #5e9cbd, 46px 120px #5e9cbd, 58px 20px #5e9cbd, 60px 80px #5e9cbd, 60px 120px #5e9cbd, 60px 160px #5e9cbd, 76px 10px #5e9cbd, 76px 60px #5e9cbd, 76px 80px #5e9cbd, 70px 130px #5e9cbd;
  z-index: 99;
}
.builds::before {
  content: '';
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  border-radius: 100%;
  background: transparent;
  box-shadow: 12px 0px #295485, 24px 0px #295485, 36px 0px #295485, 48px 0px #295485, 60px 0px #295485, 72px 0px #295485;
  z-index: 99;
}

人间皆安

这就是我设计这个建筑的初衷。每扇窗户后面，是一个关于家的温馨故事。

窗户

一个标签，实现窗户效果。

窗户是带边框的矩形，上面的隔档，使用伪元素即可。

.casement {
  width: 70px;
  height: 100px;
  background: #ffe097;
  position: absolute;
  left: 30px;
  border: 2px solid #453d52;
  overflow: hidden;
}
.casement::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  margin-left: -2px;
  background: #453d52;
  z-index: 99;
}

窗帘

窗帘的实现还是很有趣的。

依旧是一个标签完成窗帘的效果。窗帘收起来的效果，主要在于图形结合圆角的设置。

窗帘上半部分较长，下半部分较短，符合日常对窗帘的认知。设置上下两个图形一个角度上的弧度，组合在一起形成被收起的效果。

.curtain {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
}
.curtain::before,
.curtain::after {
  content: '';
  position: absolute;
  background: #bda16a;
}
.curtain::before {
  width: 30px;
  height: 70px;
  top: 0;
  right: -5px;
  border-radius: 0 0 0 100%;
}
.curtain::after {
  width: 20px;
  height: 34px;
  top: 67px;
  right: -5px;
  border-radius: 100% 0 0 0;
}

最终效果

彩蛋时刻

这个彩蛋是我抓住的稍纵即逝的灵感，有那么点「棋魂」里的神之一手的感觉。

当我看到星光下的高楼大厦，突然想到之前在上海东方明珠上观察地面时的楼宇的情景，远处的高大建筑，大多拥有醒目的 LOGO。叮，贺卡里的楼宇也可以加上 LOGO，掘金的 LOGO 就设计的很好看。

码上掘金里创作的代码效果加上了掘金 LOGO，这个搭配岂不妙哉。

先观察

掘金这个 LOGO 设计的很有意思，虽然是平面图，但是视觉上像一个立体的金字塔。这个设计很巧妙。

我们来拆解一下这个 LOGO。无论是顺时针还是逆时针旋转45度，都可以将它拆解为三个部分：

后实现

正方形的实现还是很简单的。

.juejin {
  width: 16px;
  height: 16px;
  background: #1f80ff;
}

而折线可以看做是缺少两个边的正方形，只需要完成一对相邻的边即可。

而作为除了正方形以外的唯二两个图形。两个折线使用伪类实现即可。

最终我会将图形进行逆时针旋转，所以相邻两个边选择了图形的右侧和下侧。

.juejin::before,
.juejin::after {
  content: '';
  border-right: 8px solid #1f80ff;
  border-bottom: 8px solid #1f80ff;
  left: 0;
  top: 0;
  background: transparent;
  position: absolute;
}
.juejin::before {
  width: 24px;
  height: 24px;
}
.juejin::after {
  width: 40px;
  height: 40px;
}

三个部分实现完成，还需要一个步骤，那就是图形旋转，根据需要顺时针旋转45度。

这个时候就能得到最终的 LOGO，将 LOGO 摆放在贺卡中，最大最有设计特色的大厦即可。

.juejin {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #1f80ff;
  transform: rotate(45deg) scale(0.3);
  right: 5px;
  bottom: 250px;
  z-index: 999;
}

总结

灵感往往出现的出其不意，抓出一闪而过的灵感，分析它，实现它。留下无数闪光的效果，便是我对CSS热爱的原因之一。

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