<template>
  <div id="list-demo" class="demo">
    <ul>
      <li v-for="(item,index) in items" v-bind:key="index" class="list-complete-item">
        {{ item.txt }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      items: [
        { txt: "人生在世須盡歡, 莫使金樽空對月", show: false, id: 1 },
        { txt: "我寄愁心與明月，隨風(fēng)直到夜郎西", show: false, id: 2 },
        { txt: "不是花中偏愛菊，此花開盡更無花", show: false, id: 3 },
        { txt: "辛苦遭逢起一經(jīng)，干戈寥落四周星", show: false, id: 4 },
        { txt: "山河破碎風(fēng)飄絮，身世浮沉雨打萍", show: false, id: 5 },
        { txt: "惶恐灘頭說惶恐，零丁洋里嘆零丁", show: false, id: 6 },
        { txt: "人生自古誰無死？留取丹心照汗青", show: false, id: 7 },
        { txt: "人生自古誰無死？留取丹心照汗青", show: false, id: 8 },
        { txt: "人生自古誰無死？留取丹心照汗青", show: false, id: 9 },
        { txt: "人生自古誰無死？留取丹心照汗青", show: false, id: 10 },
        { txt: "人生在世須盡歡, 莫使金樽空對月", show: false, id: 1 },
        { txt: "我寄愁心與明月，隨風(fēng)直到夜郎西", show: false, id: 2 },
        { txt: "不是花中偏愛菊，此花開盡更無花", show: false, id: 3 },
        { txt: "辛苦遭逢起一經(jīng)，干戈寥落四周星", show: false, id: 4 },
        { txt: "山河破碎風(fēng)飄絮，身世浮沉雨打萍", show: false, id: 5 },
        { txt: "惶恐灘頭說惶恐，零丁洋里嘆零丁", show: false, id: 6 },
        { txt: "人生自古誰無死？留取丹心照汗青", show: false, id: 7 },
        { txt: "人生自古誰無死？留取丹心照汗青", show: false, id: 8 },
        { txt: "人生自古誰無死？留取丹心照汗青", show: false, id: 9 },
        { txt: "人生自古誰無死？留取丹心照汗青", show: false, id: 10 },

      ]
    };
  },
  mounted() {

  },
  methods: {

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#list-demo{
  height: 100px;
  overflow: hidden;
  position: relative;
  background-color: purple;
}
ul {
  width: 300px;
  height: auto;
  /* overflow: hidden; */
  position: absolute;
  animation: move 4s linear infinite;
  top:0;
  
}
ul>li{
  height: 30px;
  list-style: none;
  margin-bottom: 10px;
  background-color: #eee;
}

@keyframes move{
  0%{
    top:-400px;
  }
  100%{
    top: 0;
  }
}
</style>