小程序个人中心水波纹效果

实现的基本原理：
用一张水波纹的gif图片，设置为和背景图同样的色调，将水波纹设置为绝对定位，固定在下方，并且显示的优先级设置为最高，即会覆盖原来的背景图，无需用js，纯css实现。

本文使用 uni-app 来实现，用原生的小伙伴可以自己改一下语法

效果图

HTML代码

<template>
	<view>
		<view class="top">
			<view class="center">
				<view class="center_top">
					<view class="center_img" @tap="toBaseInfo">
						<!-- <image src="../../static/info_img.jpg"></image> -->
						<open-data type="userAvatarUrl" class="user_head"></open-data>
					</view>
					<view class="center_info" @tap="toBaseInfo">
						<view class="center_name">{{trueName}}</view>
						<!-- <view class="center_phone">phone:{{phone}}</view> -->
						<view class="center_phone">基本信息</view>
					</view>
				</view>
				<view class="center_down">
					<view class="center_rank" @tap="toNone">
						<image class="rank_icon" src="../../static/rank.png"></image>
						<text class="rank_text">我的排名</text>
					</view>
					<view class="center_score" @tap="toNone">
						<image class="rank_icon" src="../../static/points.png"></image>
						<text class="rank_text">我的积分</text>
					</view>
				</view>
			</view>
			<image src='http://docfile.funkingka.cn/FqzmiFqvXbHg-cfbquNRlawHUgHt' mode='scaleToFill' class='gif-wave'></image>
		</view>
	</view>
</template>

CSS代码

	Page {
		font-size: 14px;
	}
 
	.top {
		width: 100%;
		height: 180px;
		background: #23EBB9;
		padding-top: 15px;
		position: relative;
	}
 
	.center {
		width: 95%;
		height: 150px;
		background: white;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		border-radius: 5px;
	}
 
	.center_top {
		display: flex;
		flex-direction: row;
		width: 80%;
		height: 80px;
		margin: 0 auto;
		margin-top: 20rpx;
		border-bottom: 1px solid #EEEEEE;
	}
 
	.center_img {
		width: 66px;
		height: 66px;
		border-radius: 50%;
		overflow: hidden;
	}
 
	.center_img image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
 
	.center_img .user_head {
		width: 100%;
		height: 100%;
	}
 
	.center_info {
		display: flex;
		flex-direction: column;
		margin-top: 10rpx;
		margin-left: 30px;
	}
 
	.center_name {
		font-size: 20px;
	}
 
	.center_phone {
		color: #BEBEBE;
	}
 
	.center_down {
		display: flex;
		flex-direction: row;
		width: 80%;
		height: 35px;
		margin: 0 auto;
		margin-top: 20rpx;
	}
 
	.center_rank {
		width: 50%;
		height: 35px;
		display: flex;
		flex-direction: row;
	}
 
	.rank_text {
		height: 35px;
		line-height: 35px;
		margin-left: 10rpx;
		color: #AAAAAA;
	}
 
	.center_rank image {
		width: 35px;
		height: 35px;
	}
 
	.center_score {
		width: 50%;
		height: 35px;
		display: flex;
		flex-direction: row;
	}
 
	.center_score image {
		width: 35px;
		height: 35px;
	}
 
	.gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}