css3实现弹幕

vue 

<template>
  <div class="homelist">
    <div class="barrage-div">
        <img :src="mathimg"/>
        新订单来自 {{mathname}} {{mathtime}}前
    </div>
  </div>
</template>

js

data:
barrageList:[
        {name:'叶落森',time:'20s',img:'../../../static/images/head1.jpg'},
        {name:'马思思',time:'10s',img:'../../../static/images/head2.jpg'},
        {name:'落泪～',time:'60s',img:'../../../static/images/head3.jpg'},
        {name:'忧伤的小丑～',time:'45s',img:'../../../static/images/head4.jpg'},
        {name:'happy',time:'28s',img:'../../../static/images/head5.jpg'},
        {name:'yls',time:'48s',img:'../../../static/images/head6.jpg'},
        {name:'幸福开花',time:'30s',img:'../../../static/images/head7.jpg'},
        {name:'百合',time:'50s',img:'../../../static/images/head8.jpg'},
        {name:'风飘',time:'25s',img:'../../../static/images/head9.jpg'},
        {name:'土耳其',time:'55s',img:'../../../static/images/head10.jpg'}
],

created() {
    this.liulannum=new Date().getTime()-1553756018871
    let mathnum=Math.floor(Math.random()*10+1)
    this.mathname=this.barrageList[mathnum].name
    this.mathtime=this.barrageList[mathnum].time
    this.mathimg=this.barrageList[mathnum].img
    setInterval(()=>{
      let mathnum=Math.floor(Math.random()*10+1)
      this.mathname=this.barrageList[mathnum].name
      this.mathtime=this.barrageList[mathnum].time
      this.mathimg=this.barrageList[mathnum].img
    },15000)
  },

less

.homelist{
    .barrage-div{
        position: fixed;
        box-sizing: border-box;
        color: #fff;
        bottom: 60px;
        height: 30px;
        line-height: 30px;
        width: 200px;
        border: 0px solid #fff;
        border-radius: 15px;
        overflow-x: hidden;
        background-color: rgba(0,0,0,0.5);   
        animation:myfirst 15s;/*把 "myfirst" 动画捆绑到 div 元素，时长：5 秒*/
        -webkit-animation:myfirst 15s; /* Safari and Chrome */
        animation-timing-function:linear;
        -webkit-animation-timing-function:linear;
        animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        img{
            width: 26px;
            height: 26px;
            vertical-align: middle;  //内联块元素，居中对齐
            padding-left: 2px;
            border-radius: 50%;
        }
    }
}

@keyframes myfirst
{
	0%   {left:10000%;}
	25%  {left:60%}
	50%  {left:20%}
	75%  {left:-20%}
	100% {left:-100%;}
}
 
@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {left:10000%;}
	25%  {left:60%}
	50%  {left:20%}
	75%  {left:-20%}
	100% {left:-100%;}
}