以下代码使用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
}
})
},