vue+animation动画实现跑马灯效果

本文实例为大家分享了vue+animation动画实现跑马灯效果的具体代码，供大家参考，具体内容如下

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>
    <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>
export default {
 name: "activity",
 data() {
  return {
   lists: [
    { name: "马云阿萨" },
    { name: "雷军的" },
    { name: "王勤啊啊啊啊" },
    { name: "等伦伦" }
   ]
  };
 },
};
</script>

<style scoped>
.box {
 width: 100%;
 height: 0.6rem;
 background-color: #b32855;
 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: 0.6rem;
 display: flex;
 align-items: center;
}
ul li .content {
 height: 0.4rem;
 padding: 0 0.2rem;
 border-radius: 0.2rem;
 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>

2、单行显示，每行显示多条

效果图

上代码

<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*2 + 's;'">
    <li :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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。