vue css3 animation 移动端手机号滚屏公告，向上滚动

前沿

---

这个是笔者自己的笔记，方便以后开发，我们的需求是单行文本向上滚动播放。自己封装为组件。

不过，这个体验不是很好。上下衔接不友好

一 新建一个组件，scrollOn.vue

    <div class="WinBottom Font14 ">
              <div class="inner-container Ellipsis" v-for="(item,index) in WinBottom" :key="index" v-html="item.text">div>
       div>
<script>
export default {
props:["WinBottom"],
   data(){
     return{
      
}   
}
}

script>
<style lang="less">
//2倍图/100
       .WinBottom {
            height: 0.75rem;
            margin-top: 0.22rem;
            overflow: hidden;
            div {
                margin: auto;
                margin-top: 0.16rem;
                width: 4.3rem;
                text-align: center;
            }
        }
        .inner-container {
            animation: phoneMove 5s linear infinite;
            animation-fill-mode: forwards;
        }
        @keyframes phoneMove {
            0% {
                transform: translateY(0)
            }
            100% {
                transform: translateY(-2rem)       //负值表示不断向上滚动
            }
        }
style>

二， 引入页面，

//直接引入运用就可以了
//引入路径的话这里就不写了