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