今天一个朋友问一个问题，有一个需求：需在页面上有一个水滴，会动的水滴，要逼真的那种，这应该怎么画（当前情况下不能使用图片和canvas）

我一惊，这不是很简单吗，细想也对，现在框架满天飞，各种库画特效手到擒来，对于一小部分人来说确实被这种需求乍一看的难住，今天简单记录一下难道一个小特效一般的思路是怎样的

先看一眼最后的dome

 

即使现在的前端已经涵盖了后端到前端，软件到硬件，但归根到底画页面依然是我们前端开发的一个主方向，作为前端开发（工程师），首先要会的就是画各种奇形怪状，特效满天飞的东西

边做边讲，首先创建两个基础元素，作为背景和水滴，简单给一下样式

接下来以类名为water的div来画水滴效果

首先想，一个水滴是什么样的，找找素材

 之后，那对于一个水滴怎么来实现，观察首先水滴是圆的，那就是要依靠border-radius属性，立体感不多说来自于box-shadow，那就简单了

直接开画

拿红色边框表示一下位置，直接通过

border-radius画基础形状

调个阴影 ，画出水滴的效果

去掉边框看效果

现在来画高光，如此这般的一般使用伪元素

 

 

 之后简单些个动画，让水滴动起来就好了

 

 最后看一下动起来的效果