利用CSS实现一个夜灯

夜灯实现起来就比较简单了，不用跟前面似的大讲特讲了，先来看一下 HTML 部分的代码结构

code.juejin.cn/pen/7092248…

<div class="main">
  <div class="lamp-bottom">
    <div class="shadow"></div>
    <div class="body"></div>
    <div class="top"></div>
  </div>
  <div class="lamp">
    <div class="fire">
      <div class="frame"></div>
    </div>
    <div class="body"></div>
    <div class="light"></div>
  </div>
  <div class="lamp-top">
    <div class="handle"></div>
    <div class="brimbody"></div>
    <div class="brimtop"></div>
    <div class="body"></div>
    <div class="top"></div>
  </div>
</div>

夜灯由三部分组成，上部，灯体和下部。

lamp-top

灯的上部是由两个圆柱和一个提手构成的，圆柱的实现很有意思，他其实利用了视觉差异。

brimbody，brimtop，body，top分别构成了两个圆柱的上下底面。通过分别设置绝对定位形成视觉上的立体效果。

.lamp-top .top {
    top: -30px;
    left: -30px;
    width: 60px;
    height: 60px;
    background: #323c46;
}
.lamp-top .body {
    top: -30px;
    left: -30px;
    width: 60px;
    height: 80px;
    background: #191e23;
}
.lamp-top .brimtop {
    top: -20px;
    left: -40px;
    width: 80px;
    height: 80px;
    background: #323c46;
}
.lamp-top .brimbody {
    top: -20px;
    left: -40px;
    width: 80px;
    height: 100px;
    background: #191e23;
}

然后分别设置四个面的圆角，将四个面变为圆形，就可以实现圆柱效果。

border-radius: 99px;

实现的效果看起来比效果图臃肿很多，没关系，最终的效果其实给 main 设置了 scaleY

.main {
    width: 100%;
    height: 100%;
    transform: scaleY(0.5);
}

双圆柱就实现了。

lamp-bottom

夜灯底部的实现思路是类似的，只不过底部只有一个圆柱，shadow 设置了部分阴影，增强立体效果。

.lamp-bottom .shadow {
    top: 30px;
    left: -30px;
    width: 60px;
    height: 60px;
    background: #0d0f12;
    border-radius: 99px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}

lamp

主体部分的难点主要在于火焰的实现，遇到这种看上去奇形怪状的图形，但看仔细了还有点椭圆或者圆形，一般都可以借助 border-radius 实现。

.frame {
    width: 30px;
    height: 30px;
    background: #ac1212;
    background: linear-gradient(-45deg, #6d0019 0%, #ac1212 100%);
    border-radius: 0% 100% 33% 67%/0% 67% 33% 100%;
    transform: rotateZ(45deg);
  }

fire 部分是火焰的主体，在这里设置了火焰的动效。

@keyframes fire {
    0% {
      transform: scaleY(2.3);
    }
    100% {
      transform: scaleY(1.7);
    }
}

 .fire {
    top: calc(50% + 65px);
    left: -15px;
    width: 30px;
    height: 30px;
    transform: scaleY(2);
    transform-origin: 50% 100%;
    -webkit-animation: fire 50ms infinite alternate;
    animation: fire 50ms infinite alternate;
  }

三部分实现完毕后，夜灯就大功告成了