<template>
  <div class="lucky-user">  <!-- 容器 -->
    <ul class="user-list" :style="`animation-duration: ${luckyUsers.length * 4}s;`">  <!-- 內(nèi)容區(qū)容器 -->
     <li v-for="(item, index) in luckyUsers" :key="index">{{ item }}</li>   <!-- 內(nèi)容A -->
     <li v-for="(item, index) in luckyUsers" :key="index+'copy'">{{ item }}</li>  <!-- 內(nèi)容B -->
    </ul>
  </div>
</template>

.lucky-user {
  width: 540px; //容器定寬高
  height: 30px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 30px;
  color: #E9B65F;
  overflow: hidden; //超出內(nèi)容隱藏
  .user-list {
    width: fit-content; // Q1
    white-space: nowrap; // 內(nèi)容不換行
    animation-name: seamless-scrolling; // Q3
    animation-timing-function: linear; // 動畫速度曲線，勻速
    animation-iteration-count: infinite; // 動畫循環(huán)無限次播放
    li {
      display: inline-block;
      margin-right: 30px;
    }
  }
}

@keyframes seamless-scrolling {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-50%); //Q2
  }
}

export default {
 name: 'app',
  data() {
   return {
    luckyUsers: []
   }
  },
  created() {
   this.getLuckyUsersList()
  },
  methods: {
   getLuckyUsersList () {
     //調(diào)接口拿取數(shù)據(jù)
     this.luckyUsers = [
      '000000抽中了xxx獎品',
      '111111抽中了xxx獎品',
      '222222抽中了xxx獎品',
     ]
    }
  }
}