vue 文字滚屏

1、通过animation使画面动起来

<template>
    <div class="con">
        <div class="inner-container">
            <p class="text" v-for="(text, index) in arr" :key="index">{{text}}</p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'lift01',
    data() {
        return {
            arr: [
                '1 菜单按钮类型，同 Button 组件(只在split-button为 true 的情况下有效)',
                '2 下拉触发元素呈现为按钮组',
                '3 菜单弹出位置',
                '4 展开下拉菜单的延时（仅在 trigger 为 hover 时有效）',
                '5 是否在点击菜单项后隐藏菜单', 
                '1 菜单按钮类型，同 Button 组件(只在split-button为 true 的情况下有效)', 
            ],
        };
    },
    mounted() {
        
    },
    methods: {
        
    },
};
</script>

<style lang="scss" scoped>
.con{
    width: 500px;
    height: 160px;
    border: 1px solid #ccc;
    overflow: hidden;
}
.inner-container {
  animation: myMove 5s linear infinite;
  animation-fill-mode: forwards;
}
  /*样式一文字无缝滚动*/
@keyframes myMove {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100px);
  }
}
/*样式二文字停顿滚动*/
@keyframes myMove2 {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-30px);
  }
  20% {
    transform: translateY(-30px);
  }
  30% {
    transform: translateY(-60px);
  }
  40% {
    transform: translateY(-60px);
  }
  50% {
    transform: translateY(-90px);
  }
  60% {
    transform: translateY(-90px);
  }
  70% {
    transform: translateY(-120px);
  }
  80% {
    transform: translateY(-120px);
  }
  90% {
    transform: translateY(-150px);
  }
  100% {
    transform: translateY(-150px);
  }
}

</style>