持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

你的床头柜上会不会放个小夜灯呢，我是很少用的，但是并不妨碍我们来做一个这样的效果。

床前夜灯

如果说床前明月光，会疑是地上霜；那么床前小夜灯，就是会暖光伴你行。当然我睡觉是不喜欢开灯的，你睡觉是否会关灯呢，大家可以留言都统计一下。

结构

夜灯总共有五个面，底面当成灯，四周作为灯的罩子，如下：

 <div class="camera">
    <div class="container">
        <div style="--i:0"></div>
        <div style="--i:1"></div>
        <div style="--i:2"></div>
        <div style="--i:3"></div>
    </div>
</div>

样式

这里我们就不展示camera 的样式了，用到3D的知识都是差不多的，大家可以参考这篇文章：（二十六）巧用CSS3之旋转木马或者在下面看代码详情。

我们就从四周的罩子讲起，这里用到了3D的旋转与位移，使用阴影使四周发光，使用filter使四面的颜色不一样，如下：

.container div {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: radial-gradient(transparent, cyan);
    transform: rotateY(calc(var(--i) * 90deg)) translateZ(calc(var(--size) * 0.5));
    filter: hue-rotate(calc(var(--i) * 90deg));
    box-shadow: 0 0 0.5rem cyan,
        0 0 1rem cyan;
        border-radius: 50% 50% 0 0;
}

然后就是低面的灯了，这是使用径向渐变和阴影效果来实现的，如下：

.container::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: center center;
    transform: rotateX(90deg) translateZ(calc(var(--size) * -0.5));
    background: radial-gradient(gold, transparent);
    -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0004);
}

效果

效果及其代码详情如下：

总结

一个发光的小夜灯送给你们，但是我们来看一下，像不像一个盒子呢？

我们可以在这个效果的基础上进行变形，可以做成一个五彩的音乐盒，也可以做成一个用来抽奖的盲盒，也可以做成你想做成的样子。

如果感兴趣，可以把自己的想法加入进去。