css3给我们前端开发带来了很多方便，我们可以利用css3的新特性实现各种造型和动态效果，笔者将介绍如何在H5-Dooring编辑器中使用css3实现水波动画。由于生成gif的工具比较弱（网上找个好用的mac版gif视频生成工具。。。），只好上传一张原图，大家自己脑补一下。下面我们来研究一下实现原理和实现方法。动画拆解如果我们想用纯css来实现曲线，我们的第一反应就是使用border-radius属性。比如实现一个圆形，我们只需要设置如下：.circle{border-radius:50%;}实现椭圆，扇形，半椭圆等，只需要设置圆角即可.circle{border-radius:50%100%40%60%;}上面代码的效果如下：我们再发挥一下想象，如果是闭合的曲线能否实现在同样的方式？我们只需要将背景改为border，并调整border-radius参数即可。下面给大家看一张我用css画的图。大家可以参考学习：当然，利用同样的原理，我们可以实现更多有趣的模式，这里就不举例了。回到正题，我们来看看水波动画的实现原理。首先我们实现了不规则的动画，剩下的工作就是如何实现波浪和波浪动画，参考上面不规则图形的实现方案。波浪线的制作可以通过类似的裁剪来实现，如下：从上图可以看出，我们使用css的border-radius制作了一个矩形和一个圆角矩形，使用transform设置偏移和旋转，就可以实现底切面。最后我们用animation动画让它动起来看看效果：我们只需要优化一下上面的动画，让背景更柔和一些，比如圆形，容器溢出隐藏，这样H5中的水波动画-可以实现Dooringeditor，css源码如下：.dragPay{position:absolute;z-指数：99999；左：414px；顶部：156px；宽度：60px；高度：60px；边界半径：50%；边框：3px实心#20c961；背景：#ffffff；溢出：隐藏；填充：5px；:-8px;宽度：60px;高度：60px；背景图像：线性渐变（-180deg，#8dec8a13%，#70cf2391%）；边界半径：50%；行高：60px；:32px;光标：指针；}.dragPay.waveMask{位置：绝对；宽度：120px；高度：120px；顶部：0；左：50%；边界半径：40%；背景颜色：rgba(255,255,255,0.9);变换：平移（-50%，-82%）旋转（0）；动画：旋转10s线性-5s无限；z-指数：20；指针事件：无；}@keyframestoRotate{50%{transform:translate(-50%,-70%)rotate(180deg);}100%{变换：平移(-50%,-70%)旋转(360deg);}}html结构如下：
