置顶【开箱即用】分享几个好看的波浪动画css效果！精选热门

2019-09-26

12074浏览

16评论

分享几种波浪的样式以供大家参考！

以下代码不一定都是本人原创，很多都是借鉴参考的（模仿是第一生产力嘛），有些已忘记出处了。以下分享给大家，供学习参考！欢迎收藏补充，说不定哪天你就用上了！

一、第一种效果

//index.wxml
<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"> </view>
      <view class="water-2"> </view>
    </view>
  </view>
</view>

//index.wxss
.zr {
  color: white;
  background: #4cb4e7; /*#0396FF*/
  width: 100%;
  height: 100px;
  position: relative;
}
.water {
  position: absolute;
  left: 0;
  bottom: -10px;
  height: 30px;
  width: 100%;
  z-index: 1;
}
.water-c {
  position: relative;
}
.water-1 {
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYwMHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0xPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IuaIkSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMTMzLjAwMDAwMCkiIGZpbGwtb3BhY2l0eT0iMC4zIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IndhdGVyLTEiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMS4wMDAwMDAsIDEzMy4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDcuNjk4NTczOTUgTDQuNjcwNzE5NjJlLTE1LDYwIEw2MDAsNjAgTDYwMCw3LjM1MjMwNDYxIEM2MDAsNy4zNTIzMDQ2MSA0MzIuNzIxMDUyLDI0LjEwNjUxMzggMjkwLjQ4NDA0LDcuMzU2NzQxODcgQzE0OC4yNDcwMjcsLTkuMzkzMDMwMDggMCw3LjY5ODU3Mzk1IDAsNy42OTg1NzM5NSBaIiBpZD0iUGF0aC0xIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") repeat-x;
  background-size: 600px;
  -webkit-animation: wave-animation-1 3.5s infinite linear;
  animation: wave-animation-1 3.5s infinite linear;
}
.water-2 {
  top: 5px;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYwMHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0yPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IuaIkSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMjQ2LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0id2F0ZXItMiIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIxLjAwMDAwMCwgMjQ2LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTAsNy42OTg1NzM5NSBMNC42NzA3MTk2MmUtMTUsNjAgTDYwMCw2MCBMNjAwLDcuMzUyMzA0NjEgQzYwMCw3LjM1MjMwNDYxIDQzMi43MjEwNTIsMjQuMTA2NTEzOCAyOTAuNDg0MDQsNy4zNTY3NDE4NyBDMTQ4LjI0NzAyNywtOS4zOTMwMzAwOCAwLDcuNjk4NTczOTUgMCw3LjY5ODU3Mzk1IFoiIGlkPSJQYXRoLTIiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMC4wMDAwMDAsIDMwLjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtMzAwLjAwMDAwMCwgLTMwLjAwMDAwMCkgIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") repeat-x;
  background-size: 600px;
  -webkit-animation: wave-animation-2 6s infinite linear;
  animation: wave-animation-2 6s infinite linear;
}
.water-1, .water-2 {
  position: absolute;
  width: 100%;
  height: 60px;
}
.back-white {
  background: #fff;
}
@keyframes wave-animation-1 {
  0% {
    background-position: 0 top;
  }
  100% {
    background-position: 600px top;
  }
}
@keyframes wave-animation-2 {
  0% {
    background-position: 0 top;
  }
  100% {
    background-position: 600px top;
  }
}
.user_box {
  display: flex;
  z-index: 10000 !important;

  opacity: 0; /* 透明度*/
  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: 42rpx;
}
.userInfo {
  flex: 1;
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
  max-height: 50px;
  max-width: 50px;
  margin-left: 5%;
  margin-top: 5%;
  border: 2px solid #fff;
}

二、第二种效果

//index.wxml
<view class="waveWrapper waveAnimation">
  <view class="waveWrapperInner bgTop">
    <view class="wave waveTop" style="background-image: url('https://s2.ax1x.com/2019/09/26/um8g7n.png')"></view>
  </view>
  <view class="waveWrapperInner bgMiddle">
    <view class="wave waveMiddle" style="background-image: url('https://s2.ax1x.com/2019/09/26/umGZ38.png')"></view>
  </view>
  <view class="waveWrapperInner bgBottom">
    <view class="wave waveBottom" style="background-image: url('https://s2.ax1x.com/2019/09/26/umGuuQ.png')"></view>
  </view>
</view>

//index.wxss
.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    height: 300px;
    top: 0;
    margin: auto;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
    background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);
}
.bgTop {
    z-index: 15;
    opacity: 0.5;
}
.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}
.bgBottom {
    z-index: 5;
}
.wave {
    position: absolute;
    left: 0;
    width: 500%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop {
    background-size: 50% 100px;
}
.waveAnimation .waveTop {
  animation: move-wave 3s;
   -webkit-animation: move-wave 3s;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}
.waveMiddle {
    background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
}
.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
}
@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}

三、第三种效果

//index.wxml
<view class="container">
  <image class="title" src="https://ftp.bmp.ovh/imgs/2019/09/74bada9c4143786a.png"></image>
  <view class="content">
    <view class="hd" style="transform:rotateZ({{angle}}deg);">
      <image class="logo" src="https://ftp.bmp.ovh/imgs/2019/09/d31b8fcf19ee48dc.png"></image>
      <image class="wave" src="wave.png" mode="aspectFill"></image>
      <image class="wave wave-bg" src="wave.png" mode="aspectFill"></image>
    </view>
    <view class="bd" style="height: 100rpx;">
    </view>
  </view>
</view>

//index.wxss
image{
max-width:none;
}
.container {
  background: #7acfa6;
  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: 600rpx;
  height: 200rpx;
  margin-left: -300rpx;
  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); }
}

wave.png（可下载到本地）

在这个基础上，再加上js的代码，即可实现根据手机倾向，水波晃动的效果

wx.onAccelerometerChange(function callback)
监听加速度数据事件。

//index.js

Page({

  onReady: function () {
    var _this = this;
    wx.onAccelerometerChange(function (res) {
      var angle = -(res.x * 30).toFixed(1);
      if (angle > 14) { angle = 14; }
      else if (angle < -14) { angle = -14; }
      if (_this.data.angle !== angle) {
        _this.setData({
          angle: angle
        });
      }
    });
  },
  
});

四、第四种效果

//index.wxml
<view class='page__bd'>
  <view class="bg-img padding-tb-xl" style="background-image:url('http://wx4.sinaimg.cn/mw690/006UdlVNgy1g2v2t1ih8jj31hc0p0qej.jpg');background-size:cover;">
    <view class="cu-bar">
      <view class="content text-bold text-white">
        悦拍屋
      </view>
    </view>
  </view>
  <view class="shadow-blur">
    <image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100rpx;margin-top:-100rpx;"></image>
  </view>
</view>

//index.wxss
@import "colorui.wxss";
.gif-black {
  display: block;
  border: none;
  mix-blend-mode: screen;  
}

本效果需要引入ColorUI组件库

最后一次编辑于 2019-09-26

分享评论

16 个评论

LMS
2019-11-07
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
MARKE
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
2019-11-07
赞同
回复
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他
r=a(1 - sinθ)
2019-10-12
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
学习啦~第三种效果超厉害的说，隔壁小孩还以为是游戏
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
2019-10-12
赞同
回复
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他
光雪健
2019-10-11
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
厉害厉害

你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
2019-10-11
赞同
回复
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他
必嗨外卖
2019-09-28
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
貌美如花
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
2019-09-28
赞同
回复
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他
污昂ᰔᩚ王࿐
2019-09-27
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
收藏了
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
2019-09-27
赞同
回复
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他
疼我所疼
2019-09-27
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
666
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
2019-09-27
赞同
回复
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他