CSS3给我们的前端开发带来了很多方便。我们可以利用CSS3的新特性来实现各种形状和动态效果。接下来笔者将介绍如何在H5-Dooring编辑器中使用CSS3实现水波动画。由于生成gif的工具比较弱（网上求个不错的mac版gif视频生成工具。。。），只好上传一张原图，大家可以自己脑补一下。下面我们来研究一下实现原理和实现方法。动画反汇编如果我们想用纯css来实现曲线，我们的第一反应就是使用border-radius属性。比如实现一个圆形，我们只需要设置如下：.circle{border-radius:50%;}实现椭圆，扇形，半椭圆这些只需要设置不同边的圆角即可，如下：.circle{border-radius:50%100%40%60%;}上面代码的效果如下：我们再想象一下，如果是闭合曲线，是不是可以用同样的方法？我们只需要将背景更改为边框并调整border-radius参数即可。接下来给大家看一张我用css画的图。大家可以参考一下：当然，使用相同的原理我们可以实现更多有趣的模式，这里就不一一举例了。回到正题，我们来看看水波动画的实现原理。首先我们实现了不规则的动画，剩下的工作就是如何实现波浪和波浪动画，参考上面不规则图形的实现方案。波浪线的制作可以通过类似的裁剪来实现，如下：从上图可以看出，我们利用css的border-radius分别制作了一个矩形和一个圆角矩形。使用transform设置offset和rotation，可以实现底部切面。最后我们用animation动画让它动起来看看效果：我们只需要优化一下上面的动画，让背景更柔和一些，比如一个圆形，容器Overflow被隐藏，这样H5-Dooring中的水波动画编辑器可以实现。css源码如下：.dragPay{position:absolute;z-index:99999;left:414px;top:156px;width:60px;height:60px;border-radius:50%;border:3pxsolid#20c961;背景：#ffffff；溢出：隐藏；填充：5px；框大小：border-box;}.??dragPay.wave{position:relative;left:-8px;width:60px;height:60px;background-image:linear-gradient(-180deg,#8dec8a13%,#70cf2391%);边框半径:50%;line-height:60px;text-align:center;font-size:32px;cursor:pointer;}.dragPay.waveMask{position:absolute;width:120px;height:120px;top:0;left:50%；边框半径：40%；背景颜色：rgba(255,255,255,0.9)；变换：平移(-50%,-82%)旋转(0)；动画：toRotate10slinear-5sinfinite；z-index：20；pointer-events:none;}@keyframestoRotate{50%{transform:translate(-50%,-70%)rotate(180deg);}100%{transform:translate(-50%,-70%)rotate()deg);}}html结构如下：
