微信小程序波浪动态效果和背景色渐变（使用动态图，有手就行，但是流动速度固定波浪数目也固定）

波浪动态图地址

动态图地址

.wxml

<view class="header">
	<image class="bg_ware" src="https://moyv.top/wechat/images/bg_wave.gif"></image>
</view>

.wxss

page{
  background-color: #fff;/**页面背景色**/
}
.header {/**顶部背景**/
  position: relative;/**相对于自己文档的位置来定位的，对旁边的元素没有影响**/
  height:750rpx;/**设置顶部背景高度**/
  background: linear-gradient(to bottom, #e9d7df, #eea6b7);/**渐变色背景**/
}
.bg_ware {/**波浪动态图**/
  position: absolute;/**相对于父标签来进行定位，这里的父标签的class是header**/
  left: 0;/**相对于父标签左边界重合**/
  bottom: 0;/**相对于父标签下边界重合**/
  width: 100%;/**相对于父标签宽度为100%**/
  mix-blend-mode: screen;/**透明部分用底部背景色填充，简称滤色**/
  height: 120rpx;/**图片高度**/
}

完成效果