css波浪效果

以下代码使用uniapp框架,css波浪效果

<template>
	<view class="content">
		<view class="zr">
			<view class='user_box'>
				<view class='userInfo'>
					<open-data type="userAvatarUrl"></open-data>
				</view>
				<view class='userInfo_name'>
					<open-data type="userNickName"></open-data> , 欢迎您
				</view>
			</view>
			<view class="water">
				<view class="water-c">
					<view class="water-1" style="background-image: url(../../../static/img/bolang.png);"> </view>
					<view class="water-2" style="background-image: url(../../../static/img/bolang2.png);"> </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	@keyframes wave-animation-1 {
		0% {
			background-position: 0 top;
		}
	
		100% {
			background-position: 600upx top;
		}
	}
	
	@keyframes wave-animation-2 {
		0% {
			background-position: 0 top;
		}
	
		100% {
			background-position: 600px top;
		}
	}
	
	/* ------------------------- */
	.zr {
		color: white;
		background: #77eef6;
		width: 100%;
		height: 350upx;
		position: relative;
	}

	.water {
		position: absolute;
		left: 0;
		bottom: 15upx;
		height: 30upx;
		width: 100%;
		z-index: 1;
		
	}

	.water-c {
		position: relative;
		
	}

	.water-1 {
		z-index: 111;
		background-size: 600upx;
		animation: wave-animation-1 4.5s infinite linear;
	}

	.water-2 {
		
		z-index: 111;
		background-size: 600upx;
		animation: wave-animation-2 8s infinite linear;
	}

	.water-1,
	.water-2 {
		position: absolute;
		width: 100%;
		height: 60upx;
	}

	.back-white {
		background: #fff;
	}

	
	.user_box {
		display: flex;
		z-index: 66 !important;
		animation: love 1.5s ease-in-out;
		animation-fill-mode: forwards;
	}

	.userInfo_name {
		flex: 1;
		vertical-align: middle;
		width: 100%;
		margin-left: 5%;
		margin-top: 5%;
		font-size: 42upx;
	}

	.userInfo {
		flex: 1;
		width: 100%;
		border-radius: 50%;
		overflow: hidden;
		max-height: 150upx;
		max-width: 150upx;
		margin-left: 5%;
		margin-top: 5%;
		border: 2px solid #fff;
	}
</style>

第二种效果

<template>
	<view class="container">
		<image class="title" src="../../../static/img/noorder.png"></image>
		<view class="content">
			<view class="hd" style="transform:rotateZ(0deg);">
				<view class="logo">
					<open-data type="userAvatarUrl"></open-data>
				</view>
				<image class="wave" src="../../../static/img/bo.png" mode="aspectFill" />
				<image class="wave wave-bg" src="../../../static/img/bo.png" mode="aspectFill" />
				<view class="bd" style="height: 100rpx;">
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	image {
		max-width: none;
	}

	.container {
		background: #77eef6;
		align-items: stretch;
		padding: 0;
		height: 100%;
		overflow: hidden;
	}

	.content {
		flex: 1;
		display: flex;
		position: relative;
		z-index: 10;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding-bottom: 450rpx;
		/* background: -webkit-gradient(linear, left top, left bottom, from(rgba(244, 244, 244, 0)), color-stop(0.1, #f4f4f4), to(#f4f4f4)); */
		opacity: 0;
		transform: translate3d(0, 100%, 0);
		animation: rise 3s cubic-bezier(0.19, 1, 0.22, 1) .25s forwards;
	}

	@keyframes rise {
		0% {
			opacity: 0;
			transform: translate3d(0, 100%, 0);
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 1;
			transform: translate3d(0, 450rpx, 0);
		}
	}

	.title {
		position: absolute;
		top: 30rpx;
		left: 50%;
		width: 150rpx;
		height: 100rpx;
		margin-left: -75rpx;
		opacity: 0;
		animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards;
	}

	@keyframes show {
		0% {
			opacity: 0;
		}

		100% {
			opacity: .95;
		}
	}

	.hd {
		position: absolute;
		top: 0;
		left: 50%;
		width: 1000rpx;
		margin-left: -500rpx;
		height: 200rpx;
		transition: all .35s ease;
	}

	.logo {
		position: absolute;
		z-index: 2;
		left: 50%;
		bottom: 200rpx;
		width: 160rpx;
		height: 160rpx;
		margin-left: -80rpx;
		border-radius: 160rpx;
		animation: sway 10s ease-in-out infinite;
		opacity: .95;
	}

	@keyframes sway {
		0% {
			transform: translate3d(0, 20rpx, 0) rotate(-15deg);
		}

		17% {
			transform: translate3d(0, 0rpx, 0) rotate(25deg);
		}

		34% {
			transform: translate3d(0, -20rpx, 0) rotate(-20deg);
		}

		50% {
			transform: translate3d(0, -10rpx, 0) rotate(15deg);
		}

		67% {
			transform: translate3d(0, 10rpx, 0) rotate(-25deg);
		}

		84% {
			transform: translate3d(0, 15rpx, 0) rotate(15deg);
		}

		100% {
			transform: translate3d(0, 20rpx, 0) rotate(-15deg);
		}
	}

	.wave {
		position: absolute;
		z-index: 3;
		right: 0;
		bottom: 0;
		opacity: 0.725;
		height: 260rpx;
		width: 2250rpx;
		animation: wave 10s linear infinite;
	}

	.wave-bg {
		z-index: 1;
		animation: wave-bg 10.25s linear infinite;
	}

	@keyframes wave {
		from {
			transform: translate3d(125rpx, 0, 0);
		}

		to {
			transform: translate3d(1125rpx, 0, 0);
		}
	}

	@keyframes wave-bg {
		from {
			transform: translate3d(375rpx, 0, 0);
		}

		to {
			transform: translate3d(1375rpx, 0, 0);
		}
	}

	.bd {
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		animation: bd-rise 2s cubic-bezier(0.23, 1, 0.32, 1) .75s forwards;
		opacity: 0;
	}

	@keyframes bd-rise {
		from {
			opacity: 0;
			transform: translate3d(0, 60rpx, 0);
		}

		to {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}
</style>

cubic-bezier() 函数定义了一个贝塞尔曲线。
由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。

在这个基础上，再加上js的代码，即可实现根据手机倾向，水波晃动的效果
wx.onAccelerometerChange(function callback)
监听加速度数据事件。

onReady() {
			 var that = this;
			 uni.onAccelerometerChange(function(res){
				 console.log(res);
			 	var angle = -(res.x * 30).toFixed(1);
			 	      if (angle > 14) { angle = 14; }
			 	      else if (angle < -14) { angle = -14; }
			 	      if (that.angle !== angle) {
			 	        that.angle = angle
			 	      }
			 })
		},