咖啡冒气

一条会coding的Shark
404 阅读4分钟

前言

这次趁着周末休息的时间，又弄了一个新的动画效果，用CSS实现的一个咖啡冒气效果。整个实现过程比较简单，大家可以先看到下面的效果预览部分，十分简单，没有花里胡哨的技巧。话不多说，咱们直接进入主题。

效果预览

最终实现的相关效果如下。

HTML部分

首先我们看到HTML部分，相关代码如下。

 <div class="coffee">
      <div class="vapor">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="cup"></div>
      <div class="plate"></div>
    </div>

这里创建了一个带有热气动画的咖啡杯视觉效果

CSS部分

首先我们看到类名为coffee的样式，相关代码如下。

  .coffee {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: calc(9em + 1em + 2em);
      position: relative;
    }
    .coffee .cup {
      width: 10em;
      height: 9em;
      background-color: white;
      border-radius: 0 0 1.5em 1.5em;
      position: relative;
    }

在.coffee容器中使用Flexbox布局，通过flex-direction: column让子元素垂直排列，通过align-items: center让子元素水平居中，最后为内部绝对定位元素提供定位上下文。

在.coffee .cup杯子样式中，设置杯子宽度和高度以及杯子的颜色，然后再给杯子设置底部的圆角，最后通过position: relative为伪元素提供定位上下文。

接下来便是上面提到的伪元素的样式，相关代码如下。

   .coffee .cup::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2em;
      background-color: chocolate;
      border: 0.5em solid white;
      box-sizing: border-box;
      border-radius: 50%;
      top: -1em;
      box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.5);
    }
    .coffee .cup::after {
      content: "";
      position: absolute;
      width: 3em;
      height: 3.5em;
      border: 0.8em solid white;
      border-radius: 50%;
      top: 20%;
      left: 80%;
    }

这里主要使用伪元素 ::before 和 ::after 来绘制杯子的两部分。在.coffee .cup::before中，这个伪元素创建了杯子的杯身部分，杯身颜色为巧克力色，设置了白色边框，通过top: -1em向上偏移，使杯身部分露出，最后定义一个内部阴影，创造深度感。在.coffee .cup::after中，这个伪元素创建了杯子的把手部分，设置把手尺寸以及白色边框，形成环形把手，通过边框和圆形组合，创建出一个咖啡杯的环形把手。

综上所述，这里会创建一个具有巧克力色杯身、白色边框和右侧环形把手的咖啡杯视觉效果。

.coffee .vapor {
      width: 7em;
      height: 2em;
      display: flex;
      justify-content: space-between;
    }
    .coffee .vapor span {
      width: 0.1em;
      min-width: 1px;
      background-color: white;
      animation: evaporation 2s linear infinite;
      filter: opacity(0);
    }

这里创建了咖啡杯上方蒸汽飘动的动画效果。在.coffee .vapor中，设置了蒸汽容器的宽度和高度，并且使用flex布局让子元素均匀分布，两端对齐。

在.coffee .vapor span中，每个span代表一缕蒸汽，在这里应用名为 "evaporation"的动画，持续时间为2秒，速度曲线为匀速，并且无限循环。最后通过filter: opacity(0)让初始透明度为0（完全透明）。

这样就创造了咖啡杯上方热气腾腾的视觉效果。

最后我们看到这个效果的核心实现部分，相关代码如下。

.coffee .vapor span:nth-child(1) {
      animation-delay: 0.5s;
    }

    .coffee .vapor span:nth-child(2) {
      animation-delay: 0.1s;
    }

    .coffee .vapor span:nth-child(3) {
      animation-delay: 0.3s;
    }

    .coffee .vapor span:nth-child(4) {
      animation-delay: 0.4s;
    }

    .coffee .vapor span:nth-child(5) {
      animation-delay: 0.2s;
    }
    @keyframes evaporation {
      from {
        transform: translateY(0);
        filter: opacity(1) blur(0.2em);
      }
      to {
        transform: translateY(-4em);
        filter: opacity(0) blur(0.4em);
      }
    }

这里实现了咖啡蒸汽的动画效果，通过为每个蒸汽条设置不同的延迟和定义关键帧动画，创造出逼真的蒸汽飘散效果。

首先为5个蒸汽条（span元素）设置了不同的动画延迟，通过错开延迟让每个蒸汽条在不同的时间开始动画（0.1s到0.5s之间）。

然后在evaporation动画中，蒸汽从原始位置向上移动4em单位，从完全可见(opacity:1)渐变到完全透明(opacity:0)，然后从轻微模糊(blur:0.2em)到更加模糊(blur:0.4em)吗，最终在模拟蒸汽上升过程中逐渐扩散、变淡直至消失的自然现象。

所以整体工作流程就是5个白色细条水平均匀分布，每个细条在不同时间开始动画（通过不同的animation-delay）最终通过动画创造出连续不断的蒸汽效果。

总结

以上就是整个效果的实现过程了，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~

avatar
文章
阅读
粉丝