微信小程序实现波浪动画效果

注

波浪效果的素材来自小程序开源组件库ColorUI

效果图

代码

.wxml

<view class="header">
  <!-- 代码 -->
  <image class="bg_ware" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/bg_wave.gif"></image>
</view>

.wxss

.header {
  position: relative;
  height:300rpx;
  background: linear-gradient(to bottom, #56ccf2, #2f80ed);
}

.bg_ware {
  position: absolute;
  left: 0;
  bottom: -2rpx;
  width: 100%;
  mix-blend-mode: screen;
  height: 120rpx;
}

素材

图片素材：点击访问，右键保存即可。或者直接使用网络图片。