利用css和svg实现波浪效果

利用css和svg实现波浪效果

要实现类似与波浪的效果图可以有两种方法:

1.使用svg和css的结合

首先需要用AI或者其他工具画一个波浪的形状,例如如下svg:




 
 
 
 Document
 


 

让svg做左右移动的动画,就可以实现波浪左右流动的效果,再通过transformX可以实现上下高度的变化,以上有些地方没处理好,实际需注意
效果图如下所示:

2. 单纯利用svg的遮罩实现

方法二全部都是svg图,







Document



灌溉率 当前土壤灌溉率 80%

主要的关键在于,svg的遮罩mask,可以参考张鑫旭

效果图如下所示:

你可能感兴趣的:(前端css)