<template>
  <div class="marquee-container">
    <div class="marquee-text">
      这是一段自动滚动的超长文字效果，文字会从右往左不停滚动~
    </div>
  </div>
</template>
<script setup>

const props = defineProps({
  text: {
    type: String,
    required: false,
    default: ''
  }
});
</script>
<style scoped>
.marquee-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  position: relative;
}

.marquee-text {
  /*display: inline-block;
  padding-left: 0%;
  animation: marqueeYoyo 5s linear infinite alternate;*/
  position: absolute;
  left: 0;
  top: 0;
}

@keyframes marqueeYoyo {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
