纯CSS实现海浪效果

转载自Chokcoco
原文章：https://www.cnblogs.com/coco1s/archive/2017/07/18/7197662.html
感谢高产大佬的技术文

赶紧码住，说不定以后可能会用到类似的想法。

体验：
1、颜色选的是极好的：#76DAFF，纯正的天蓝色（理想的）。利用透明度实现海水和浪花（脑洞可以说是很大了），深色覆盖浅色，所以未覆盖部分就是浪花了。
2、全程利用animation，实现海浪的起伏（translate）和推动（rotate）。
3、利用放大后展现在视窗的局部体现海浪效果，实际上是两个椭圆（好像也不是椭圆。。）的边在蠕动（说实话，我想不出更好更贴切的词了）。整体效果 = 距离底部高度不同 + 圆角率不同 + animation

想要自己实现，需要注意一下几点：
1、海水与浪花圆角率之间的差不宜超过5%。
2、圆角率 -> 0 ≈ 矩形，圆角率 -> 50% ≈ 正圆 。越小折腾的越厉害，看的会很躁…