css实现跑马灯-从左往右缓慢滑动VUE3

 

<template>
  <div class="container">
    <div class="box">
      <!-- 假设lists列表有4个项，设置ul的宽度为400%（相对于box），设置li的宽度为12.5%（相对于ul是12.5%；相对于box是50%），但是li要有8个，其中4个是复制的，用来占位 -->
      <ul
        :style="
          'width:' +
          lists.length * 100 +
          '%;animation-duration:' +
          lists.length * 4 +
          's;'
        "
      >
        <li
          @click="clickItem(item)"
          :style="'width:' + 100 / (lists.length * 2) + '%;'"
          v-for="(item, index) in lists"
          :key="index"
        >
          <div class="content">{{ item.name }}</div>
        </li>
        <li
          :style="'width:' + 100 / (lists.length * 2) + '%;'"
          v-for="(item, index) in lists"
          :key="index"
        >
          <div class="content">{{ item.name }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onActivated,
  onMounted,
  getCurrentInstance,
  shallowRef,
} from 'vue';

const lists = [
  { name: '马云阿萨' },
  { name: '雷军的' },
  { name: '王勤啊啊啊啊' },
  { name: '等伦伦' },
];

const clickItem = (item) => {
  console.log(item, '点击换掉');
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100px;
  background-color: pink;
  overflow: hidden;
}
.box ul {
  animation-name: move;
  /* 在style中动态设置每一个li花费的时间为2s */
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
ul li {
  float: left;
  height: 99px;
  display: flex;
  align-items: center;
  border: solid 1px red;
  margin: 10px;
}
ul li .content {
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 平移自身宽度的50%，ul宽度的50%，剩下的那50%用来在下一次显示时占位 */
    transform: translateX(-50%);
  }
}
</style>