纯CSS实现海浪效果

xiaoxiao2021-02-28  20

转载自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% ≈ 正圆 。越小折腾的越厉害,看的会很躁…

转载请注明原文地址: https://www.6miu.com/read-2630057.html

最新回复(0)