目录
注效果图代码.wxml.wxss素材注
波浪效果的素材来自小程序开源组件库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;}
素材
图片素材:点击访问,右键保存即可。或者直接使用网络图片。