技術標籤：CSS3css

先看圖：
這個位置，兩張圖片一前一後，從左到右不停的滾動，形成一種類似於波浪的動態效果
做法：兩個盒子用背景圖片，盒子寬度200%，背景圖片寬度50%，背景圖片橫向重複，然後動畫移動即可。
關鍵點：盒子寬度200%，圖片50%，以及時間

程式碼：

<template>
  <div class="overBox">
    <div class="wave waveTop" style="background-image: url('/static/img/image/波浪4.png')"
 
></div>
    <div class="wave waveBottom" style="background-image: url('/static/img/image/波浪4.png')"></div>
    <slot></slot>
  </div>
</template>
<style lang="scss" scoped>
  .overBox{
    width: 100%;
    height: 100%;
    overflow: hidden;
 

    margin: auto;
    position: relative;
  }
  .wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
  }
  @keyframes move_wave {
    0% {
        transform: translateX(
 
-50%)
    }
    50% {
        transform: translateX(-25%)
    }
    100% {
        transform: translateX(0%)
    }
  }
  .waveTop {
    background-size: 50% 35px;
    animation: move_wave 5s linear infinite;
    z-index: 5;
  }
  .waveBottom {
    background-size: 50% 30px;
    animation: move_wave 10s linear infinite;
    z-index: 15;
    opacity: 0.8;
  }
</style>