css实现图片||文字循环滚动

1. 要的效果：几张图片或者一段文字在一个盒子里边，循环的滚动
2. 文字和图片实现循环滚动的原理是一样的，重点需要提的是①一定要子绝父相定位，为了就是让滚动的元素脱离标准流，否则transform: translateX移动的不是元素本身的长度而是参照父元素的长度②移动50%即可，为了视觉上看着是一直循环滚动的效果，利用了移动结束后瞬移从头开始的特性，移动一半然后接着继续显示下一个的开始，所以这里的③也很关键，文字或者图片要两个一致的
3. 文字循环滚动代码如下：

  <div id="wrap">
    <div id="slide">
      <span>你看看你到底在干嘛</span> //两端文字一定要一致
      <span>你看看你到底在干嘛</span>
    </div>
  </div>
</template>
<script>
  export default {
    name: "APP",
    data() {
      return {};
    },
    methods: {},
    created() { },
    mounted() { }
  };
</script>
<style scoped>
  #wrap {
    margin: 30px auto;
    overflow: hidden;
    position: relative;
    width: 100px;
    height: 20px;
    padding-bottom: 5px;
    border-bottom: 1px solid #cccccc;
    white-space: nowrap;
  }
n
  #slide {
    position: absolute;
    animation: slide 5s linear infinite;
  }

  @keyframes slide {
    0% {
      transform: translateX(0);
    }

    /* 这里的50%很重要 */
    100% {
      transform: translateX(-50%);
    }
  }
</style>

4.图片滚动效果代码：

  <div id="wrap">
    <div id="slide">
      <img src="./img/1.jpeg" alt="">
      <img src="./img/2.jpeg" alt="">
      <img src="./img/3.jpeg" alt="">
      <img src="./img/4.jpeg" alt="">
      <img src="./img/1.jpeg" alt="">
      <img src="./img/2.jpeg" alt="">
      <img src="./img/3.jpeg" alt="">
      <img src="./img/4.jpeg" alt="">
    </div>
  </div>
</template>
<script>
  export default {
    name: "APP",
    data() {
      return {};
    },
    methods: {},
    created() { },
    mounted() { }
  };
</script>
<style scoped>
  #wrap {
    margin: 500px auto;
    overflow: hidden;
    position: relative;
    width: 500px;
    height: 120px;
    padding-bottom: 5px;
    white-space: nowrap;
  }

  img {
    width: 150px;
    height: 120px;
    border: 1px solid #000;
  }

  #slide {
    position: absolute;
    animation: slide 4s linear infinite;
  }

  @keyframes slide {
    0% {
      transform: translateX(0);
    }

    /* 移动50% 这是重点 */
    100% {
      transform: translateX(-50%);
    }
  }
</style>

5.效果图：