微信小程序：波浪动画实现

先来看看效果(此效果web也适用)

波浪动画实现

原理是三张图片通过动画滚动实现的

wxml代码：

  <view class="waveWrapper waveAnimation">
    <view class="waveWrapperInner bgTop">
      <view class="wave waveTop" style="background-image:url('http://image.weilanwl.com/img/wave-top.png')"></view>
    </view>
    <view class="waveWrapperInner bgMiddle">
      <view class="wave waveMiddle" style="background-image:url('http://image.weilanwl.com/img/wave-mid.png')"></view>
    </view>
    <view class="waveWrapperInner bgBottom">
      <view class="wave waveBottom" style="background-image:url('http://image.weilanwl.com/img/wave-bot.png')"></view>
    </view>
  </view>

图片只能是网络图片

wxss代码：

@keyframes move_wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }

  50% {
    transform: translateX(-25%) translateZ(0) scaleY(1);
  }

  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1);
  }
}

.waveWrapper {
  overflow: hidden;
  position: relative;
  height: 50rpx;
  width: 100%;
  background: #39b54a;
}

.waveWrapperInner {
  position: absolute;
  width: 100%;
  overflow: hidden;
  height: 100%;
  bottom: -1px;
}

.bgTop {
  z-index: 15;
  opacity: 0.5;
  height: 24px;
}

.bgMiddle {
  z-index: 10;
  opacity: 0.75;
  height: 19px;
}

.bgBottom {
  z-index: 5;
  height: 14px;
}

.wave {
  position: absolute;
  left: 0;
  width: 2160px;
  height: 100%;
  background-repeat: repeat no-repeat;
  background-position: 0 bottom;
  transform-origin: center bottom;
}

.wave image {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.waveTop {
  background-size: 540px 25px;
}

.waveAnimation .waveTop {
  animation: move_wave 30s linear infinite;
}

.waveMiddle {
  background-size: 1080px 20px;
}

.waveAnimation .waveMiddle {
  animation: move_wave 24s linear infinite;
}

.waveBottom {
  background-size: 540px 15px;
}

.waveAnimation .waveBottom {
  animation: move_wave 12s linear infinite;
}

基本上就已经实现了动画，改成相应底色就可以了。