今天一个朋友问一个问题,有一个需求:需在页面上有一个水滴,会动的水滴,要逼真的那种,这应该怎么画(当前情况下不能使用图片和canvas)
我一惊,这不是很简单吗,细想也对,现在框架满天飞,各种库画特效手到擒来,对于一小部分人来说确实被这种需求乍一看的难住,今天简单记录一下难道一个小特效一般的思路是怎样的
先看一眼最后的dome

即使现在的前端已经涵盖了后端到前端,软件到硬件,但归根到底画页面依然是我们前端开发的一个主方向,作为前端开发(工程师),首先要会的就是画各种奇形怪状,特效满天飞的东西
边做边讲,首先创建两个基础元素,作为背景和水滴,简单给一下样式

接下来以类名为water的div来画水滴效果
首先想,一个水滴是什么样的,找找素材
之后,那对于一个水滴怎么来实现,观察首先水滴是圆的,那就是要依靠border-radius属性,立体感不多说来自于box-shadow,那就简单了
直接开画
拿红色边框表示一下位置,直接通过
border-radius画基础形状
调个阴影 ,画出水滴的效果

去掉边框看效果

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

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

最后看一下动起来的效果
















