css掩人耳目式海浪动效

css掩人耳目式海浪动效

花里胡哨的canvas实现太过于繁琐,这就是本文存在的意义.

效果图

css掩人耳目式海浪动效

拆解

首先画一个简单的盒子:
css掩人耳目式海浪动效
利用::before::after画两个圆角值(radius)不同的不规则圆形:
css掩人耳目式海浪动效
父元素设置overflow: hidden
css掩人耳目式海浪动效
最后加上animation动画让两个不规则圆形旋转起来即可

相关推荐