我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

香薰蜡烛

引言

这周一不上班？

那必须 明目张胆 的去商场溜达！

在偶然路过一家店时，闻到阵阵香香的味道，身体不由自主的拐进去了！

当然也淘到了一个超级香的蜡烛。名为： 黑香草

在这里也纪念下第一次购买的 香薰蜡烛

项目截图

实现

1.玻璃外杯

先将外部玻璃给画出来，因为蜡烛一般对应的是暖光，所以这里用到了

css 的 渐变颜色： linear-gradient

<div class="glass"></div>

.glass {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: linear-gradient(to right, #e5cdae, #cec3be);
  border-radius: 50% / 10%;
}

可以看到上面的并不立体，缺乏 立体感

所以我们给玻璃杯的头部，用 伪元素 的方式，加上一层外圈，来达到 立体感。

<div class="glass">
  <div class="glass-border"></div>
</div>

.glass{
    ...
    
    .glass-border {
        position: absolute;
        width: 199px;
        height: 25px;
        top: 0px;
        left: 0px;
        border-radius: 50%;
        border-bottom: 2px solid #dfa75a;
        z-index: 9;
    }
    
    &::before {
        content: '';
        position: absolute;
        width: 196px;
        height: 25px;
        top: 0px;
        left: 0px;
        border-radius: 50%;
        background: linear-gradient(to right, #fee8d4, #c9b192);
    }
}

同理，我们再通过 伪元素 给玻璃杯的下方，也添加一层 镂空装 的效果

.glass{
    ...
    
    &::after {
        content: '';
        position: absolute;
        width: 196px;
        height: 25px;
        bottom: 0px;
        left: 2px;
        border-radius: 50%;
        background: linear-gradient(to right, #fee8d4, #4a3c15);
        background: linear-gradient(to top, #fee8d4, #beb69d);
    }
}

这样，我们的 玻璃杯 效果，已经处理完毕！

可以看到还是很不错的。

2.蜡烛

接下来，我们处理 玻璃杯 内部的蜡烛

首先样式的形状与 玻璃杯 类似，但是其大小是 小一点 的

最后依然是通过 重复渐变 的一个效果，通过 css 的 repeating-radial-gradient 来实现

  <div class="content">
    <div class="content-border"></div>
  </div>

  .content {
    position: absolute;
    left: 11px;
    bottom: 10px;
    width: 180px;
    height: 100px;
    background: linear-gradient(to top, #beb69d, #fff);
    border-radius: 50% / 10%;
    z-index: 9;
  }
  .content-border {
    position: absolute;
    width: 180px;
    height: 25px;
    top: -1px;
    left: 0px;
    border-radius: 50%;
    background: repeating-radial-gradient(#fdd693, #fff);
  }

3.灯芯

蜡烛肯定离不开灯芯，我们将灯芯进行处理。

不过需要注意的是，灯芯，从下往上的颜色是 白色->黑色->类橘色

原因是：

最上方烧的颜色就是我们的 类橘色
中间是烧焦的黑炭
下方是白色的灯芯
最下方就是上方滴落的油

<div class="rope"></div>

.rope {
    position: absolute;
    top: -7px;
    left: 88px;
    width: 9px;
    height: 60px;
    border-radius: 55% 55% 0 0;
    background: linear-gradient(to top, #fdd693 1%, #fff 45%, #000 70%, #f58929);
}

4.火焰

火焰的颜色，一般都是 透明色 + 一点白色 组成

还有更重要的就是火焰周围的阴影

是燃烧的 类橙色

我们知道这些细节后，就可以进行处理！

<div class="flame"></div>

.flame {
  content: '';
  position: absolute;
  top: -100px;
  left: -13px;
  width: 37px;
  height: 120px;
  background: linear-gradient(white 80%, transparent);
  border-radius: 50% 50% 20% 20%;
  box-shadow: 0 -20px 10px darkorange;
}

5.动画

虽然我们的蜡烛效果已经出来了，但是是静态的，缺少生机

这里我们通过动画，将蜡烛摇晃起来!

.flame {
    ...
    animation: wind 4s linear infinite;
}

@keyframes wind {
  0% {
    border-radius: 50% 50% 20% 20%;
  }
  25% {
    border-radius: 100% 50% 20% 20%;
  }
  50% {
    border-radius: 100% 100% 20% 20%;
  }
  75% {
    border-radius: 50% 100% 20% 20%;
  }
  100% {
    border-radius: 50% 50% 20% 20%;
  }
}

动画.gif

看起来效果很不错！

这里将所有的代码放到 码上掘金 上面了，纪念下！

code.juejin.cn/pen/7142891…

总结

这里用到了很多 css 的样式知识点

定位、box-shadow、linear-gradient、repeating-radial-gradient、transform 的使用

在家里放一个 "香薰蜡烛"🔥 吧！