CSS 画水滴效果 - 意想不到的简单！

背景

最近看到了华为手机的超级快充，看到了充电效果，就想起来用css画一个水滴效果。当然实际情况其实用canvas效果会更好，这儿只是抛砖引玉。适合小白看看，提供一个思路。

效果如下

乍一看觉得有点麻烦，可能没头绪。仔细分析后会发现，其实很简单，没有用到贝塞尔曲线这些复杂的知识，只是简单的样式布局 + 动画而已。

步骤

1. 先把html框架搞出来

这一步不细说了，主要是这个water标签：

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Water by css</title>
  <style>
    .water {}
  </style>
</head>
<body>
  <div class="water" />
<body>
</html>

2. 画饼

画饼，大家应该都会，代码非常简单（后续只写css部分）：

css 复制代码

/** 定义水滴 */
.water {
  margin-top: 100px;
  margin-left: 100px;
  width: 200px;
  height: 200px;
  background-color: #007BFF;
  border-radius: 50%;
  position: relative; // 重要，相对布局
}

此时长这样：

2. 第一个波纹

波纹看着比较复杂，其实很简单，也跟上面的 position:relative 分不开，此处简单处理，就用伪类来实现了。波纹如何画呢？其实波纹是另一个更大的饼，然后通过旋转动画来实现的，而想看到波纹效果，则这个饼不能太圆。先画一个波纹：

css 复制代码

/* 第一个波纹 */
.water::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -150%;
  left: -50%;
  background-color: red;
  border-radius: 40%;
}

此时看到一个红色的大饼盖到了原来的饼上，接下来让他旋转就行，同时颜色可以改成相近的蓝色，或者用rgba加透明度；旋转用animation动画：

css 复制代码

/* 第一个波纹 */
.water::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -150%;
  left: -50%;
  background-color: rgba(255, 255, 255, 0.2);
  /* 这个控制大饼没那么圆 */
  border-radius: 40%;
  /* 动画5s，线性动画，一直循环 */
  animation: rotate 5s linear infinite ;
}

/* 定义大饼旋转动画，360度转起来！ */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

此时效果如下：

3. 第二个波纹

如果只有1个波纹，则看着比较单调，而且能看出来是固定速度在抖动；而如果再加一个波纹，同时他的动画时间与第一个不一样，则看起来随机了很多，也更形象：

css 复制代码

/* 第二个波纹 */
.water::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -150%;
  left: -50%;
  background-color: rgba(255, 255, 255, 0.2);
  /* 为了波纹更随机，此处的值要与第一个波纹不一样 */
  border-radius: 35%;
  /* 动画时间也拉长，尽量与第一个波纹不同 */
  animation: rotate 7s ease infinite;
}

此时基本就大功告成了，是不是非常简单？可以自己调试动画效果，比如可以尝试不同的动画效果，两个波纹的大小也可以调整下。包括波纹上下的距离可以调整，就可以模拟充电50%、60%、70%等效果了。

（最开始的water样式，记得加 overflow:hidden，由于两个伪类是用的白色透明度，与底色重了，所以看着没问）

所有代码：

html 复制代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Water by css</title>
    <style>
      /* 定义水滴 */
      .water {
        margin-top: 200px;
        margin-left: 200px;
          width: 200px;
          height: 200px;
          background-color: #007BFF;
          border-radius: 50%;
          position: relative;
          overflow: hidden;
          animation: wave 2s infinite linear;
      }

      /* 第一个波纹 */
      .water::before {
          content: "";
          position: absolute;
          width: 200%;
          height: 200%;
          top: -150%;
          left: -50%;
          background-color: rgba(255, 255, 255, 0.2);
          /* 这个控制大饼没那么圆 */
          border-radius: 40%;
          /* 动画5s，线性动画，一直循环 */
          animation: rotate 5s linear infinite ;
      }

      /* 第一个波纹 */
      .water::after {
          content: "";
          position: absolute;
          width: 200%;
          height: 200%;
          top: -150%;
          left: -50%;
          background-color: rgba(255, 255, 255, 0.2);
          /* 为了波纹更随机，此处的值要与第一个波纹不一样 */
          border-radius: 35%;
          /* 动画时间也拉长，尽量与第一个波纹不同 */
          animation: rotate 7s ease infinite;
      }

      /* 定义大饼(波纹)旋转动画 */
      @keyframes rotate {
          from {
              transform: rotate(0deg);
          }
          to {
              transform: rotate(360deg);
          }
      }
    </style>
</head>

<body>
    <div class="water"></div>
</body>

</html>

总结

一些看起来比较复杂的东西背后原理也许非常简单，只不过就是多个简单的东西按各自的规则走，最后形成比较复杂的东西。万里长征起于足下，加油，jym！