vue+animation动画实现跑马灯

最新推荐文章于 2025-03-27 18:04:42 发布

Upward Force

最新推荐文章于 2025-03-27 18:04:42 发布

阅读量884

点赞数 1

分类专栏： vue 动画相关文章标签： vue javascript css3

本文链接：https://blog.youkuaiyun.com/qq_43884155/article/details/107121170

版权

1、单行显示，每行只显示一条

效果图
上代码

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