前言

今天网上闲逛时看到一个 Loading 动画效果，觉得很有意思，于是研究了一下它的原理，做了一步步的思路分析，打算分享给大家。

思路分析

接下来我们来一步步分析这个 Loading 效果的实现思路。

样式重置及背景板

首先我们将 body 元素的内外边距都设置为 0，防止 body 超出屏幕产生滚动条。同时将背景设置为偏黄色。

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #efb54a;
}

接下来为了将茶杯水平居中显示，我们需要使用 flex 布局 。将水平轴和交叉轴都设置为 center 。

body {
    ...
    display: flex;
    justify-content: center;
    align-items: center;
}

茶杯

接下来我们来画茶杯杯身部分。

杯身是由一个下半部分为圆角的矩形构成的，为了方便大家理解，我做了个动图：

杯身代码如下：

.cup {
    height: 140px;
    width: 180px;
    border: 6px solid #efb54a;
    position: relative;
    border-radius: 0px 0px 70px 70px;
    box-shadow: 0px 0px 0px 6px #fff;
}

把手

接下来我们开始绘制手柄。

为了将手柄的位置和杯身贴合，我们要将杯身 .cup 设置为相对定位，同时将手柄 .handle 设置为绝对定位，然后调整 top 以及 left 的值。

杯身代码：

.cup {
    position: relative;
}

把手代码如下：

.handle {
    height: 70px;
    width: 40px;
    background-color: transparent;
    border: 6px solid #fff;
    position: absolute;
    top: 2px;
    right: -58px;
    border-radius: 0px 25px 80px 0px;
}

这里手柄的形状实际上也是由矩形绘制而成的，我们对各个角取不同的值可以达到手柄的效果。

咖啡图片

接下来我们先将杯中的咖啡图片加载进来。

首先我们需要一张咖啡的图片作为 .cup 的背景图。

.cup {
    background: url("./coffee.png");
}

我们先看看此时的效果：

波浪效果

最后是我们本次效果的重点 —— 波浪效果。

波浪效果怎么实现的呢？

我们知道 background-image 设置图片背景图的时候，background-repeat 如果不显示设置，其默认值是 repeat-x、repeat-y ，也就是横轴纵轴都会平铺。可能我们从上图看不出来，实际上它大概是这么个效果，大家意会一下：

有的小伙伴会疑惑：这和我们的波浪效果有什么关系呢？当然有了。

首先我们都知道浪花是一浪接一浪的，这个和我们上图中 repeat-x 是对应的，但是我们实际上不需要 repeat-y 这个选项。因此我们显示保留前者：

.cup {
    ...
    background-repeat: repeat-x;
}

此时的展现效果和没加上该属性值时一样，但是我们要知道，加了这段代码后，就只有 x 轴上的平铺了。

有了看得见的以及看不见的波浪后，我们只要让波浪像轮播图一样从左到右不断移动，到达末端时将它移回原点，然后重新循环播放就完成了。

循环播放我们可以使用动画，并且将播放次数设置为 infinite ；而将背景图片进行移动的效果，我们需要用到 background-position 属性，它可以修改背景图片的位置。

由于浪花是一个从下往上，从右往左的效果，因此我们需要同时修改它的 x 轴的值以及 y 轴的值。

杯身的高度为 140px，因此 动画开始时，我们不断的将 position-y 的值减小，到 100% 时让它回到原点位。

.cup {
    height: 140px;
    ...
    animation: fill 5s infinite;
  }
  @keyframes fill {
    0% {
      background-position: 0px 140px;
    }
    20% {
      background-position: -450px 100px;
    }
    40% {
      background-position: -900px 50px;
    }
    80% {   
      background-position: -1350px -40px;
    }
    100% {
      background-position: 0px 140px;
    }
}

最终效果如下：

Github 源码地址

关于本文的所有代码，都已上传至 Github 仓库：

juejin-demo/progress-bar-demo at main · catwatermelon/juejin-demo (github.com)

结束语

本文就到此结束了，希望大家阅读本文能所收获。

如果小伙伴们有别的想法，欢迎留言，让我们共同学习进步💪💪。

如果文中有不对的地方，或是大家有不同的见解，欢迎指出🙏🙏。

如果大家觉得所有收获，欢迎一键三连💕💕。