一、前言

二、过程

1、元素dom结构

dom结构十分简单，无非就是一个背景+一个用来放水滴的div

<div class="water-box">
    <div class="water" />
  </div>

2、关键的border-radius属性

border-radius的语法很简单，就是一共4个子属性，8个值决定效果。

border-radius: *1-4 length*| *%*  / *1-4 length*| *%* ;

border-radius拆开就是四个子属性，border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius，按顺时针就是左上角、右上角、右下角和左下角。

比如本文要用到的样式

border-radius: 61% 39% 55% 43% / 46% 67% 23% 50%;

等价于
border-top-left-radius:     61% 46%;  
border-top-right-radius:    39% 67%;  
border-bottom-right-radius: 55% 23%;  
border-bottom-left-radius:  43% 50%;

效果如下

简单来说，它就是每两个值，决定了形状，比如border-top-left-radius:61% 46%，

指的就是上面的边，从61%的位置，左侧的边从46%的位置，开始弯曲，其他同理。

3、添加阴影，立体感

接下来我们给水滴加上阴影效果，立体感这不就有了。

用到的是box-shadow这个属性

语法是

 box-shadow: *h-shadow v-shadow blur spread color* inset;

注意： boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

下面是本文使用的样式

box-shadow: inset 10px 20px 30px rgba(59, 53, 53, 0.5), 10px 10px 20px rgba(0, 0, 0, 0.3), 15px 15px 30px rgba(118, 104, 104, 0.05), 
inset -10px -10px 15px rgba(255, 255, 254, 0.83);

效果如下

4、添加高光，更逼真

水滴一般都有一点高光，更符合实际效果，这里用伪元素添加两个白点。

5、关键帧动画

动起来才有水滴的感觉。

这里使用@keyframes来完成。

6、完整的代码

  .water-box {
  position: fixed;
  bottom: 100px;
  right: 100px;
  width: 100px;
  height: 100px;
  background: #409eff;
  .water {
    width: 60px;
    position: relative;
    height: 60px;
    border: 1px solid #333;
    margin: 20px auto;
    border-radius: 61% 39% 55% 43% / 46% 67% 23% 50%;
    // border-radius: 61% 39% 55% 43% / 46% 0% 0% 0%;
    box-shadow: inset 10px 20px 30px rgba(59, 53, 53, 0.5), 10px 10px 20px rgba(0, 0, 0, 0.3), 15px 15px 30px rgba(118, 104, 104, 0.05), 
    inset -10px -10px 15px rgba(255, 255, 254, 0.83);
    /*使用关键帧  watermove  9s播放  匀速 无限循环*/
    animation: watermove 9s linear infinite;

  }
  .water::after{
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    left: 25px;
    top: 20px;
    /*使用关键帧  watermove  4s播放  匀速 无限循环*/
    animation: watermove 4s linear infinite;
  }
  /* 伪元素选择器:在当前盒子最前插入一个东西 */
  .water::before{
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      background: rgba(255, 255, 255, 0.82);
      border-radius: 50%;
      left: 10px;
      top: 10px;
      /*使用关键帧  watermove  4s播放  匀速 无限循环*/
      animation: watermove 4s linear infinite;
  }
  /* 关键帧 */
  @keyframes watermove{  
    20%{
        border-radius: 30% 70% 53% 47% / 28% 44% 56% 72%;
    }

    40%{
        border-radius: 30% 70% 39% 61% / 34% 39% 61% 66%;
    }

    60%{
        border-radius: 25% 75% 45% 55% / 40% 55% 45% 60%;
    }

    80%{
        border-radius: 28% 72% 31% 69% / 32% 39% 61% 68%;
    }
  }
}

三、小结

是不是很简单，快来用css试试看吧。

ps：我是地霊殿__三無，希望能帮上你。

css实现水滴效果