逻辑(css)-简单跑马灯制作

<div class="emship-example">
  <ul class="wapper">
    <li v-for="item in exampleList" :key="item.phone">
      <img :src="item.img" alt="">
      <div>
        <span>尾号{{ item.phone }}拼单成功span>
        <span>已购买{{ item.name }}span>
      div>
    li>
  ul>
div>

@keyframes remove{
  from {
    top:0
  }
  to{
    top:-380px; // 移动距离需要计算
  }
}

  &-example{
    position: absolute;
    top: 97px;
    left: 0;
    width: 100%;
    height: 50px;
    overflow: hidden;
    .wapper{
      position: absolute;
      top:0;
      left:0;
      animation: remove 10s infinite linear;
      li{
        padding-right: 6px;
        height: 32px;
        background: #333333;
        border-radius: 5px;
        opacity: 0.5;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        img{
          width: 30px;
          height: 30px;
          margin-right: 7px;
        }
        span{
          display: block;
          font-size: 10px;
          color: #fff;
          line-height: 14px;
        }
      }
    }
  }