文字跑马灯的CSS实现

使用 transform:perspective(300px) rotateY(-67.3deg); 

perspective 属性定义 3D 元素距视图的距离，与 perspective-origin 属性一同使用该属性，就能够改变 3D 元素的底部位置。

transform-origin 设置旋转元素的基点

animation: marquee 5s linear infinite;  无限循环一个动画

.box .inner:first-child span{    //对第一个元素的文字进行动画延时
  animation-delay:2.5s;
  left:-100%;
}

CSS代码：

html,body {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

body{
  background-color:#F8B595;
}

.box {
  display:flex;
}

.box .inner{
  width:200px;
  height:100px;
  line-height:100px;
  font-size:2em;
  font-family:sans-serif;
  font-weight:bold;
  white-space:nowrap;
  overflow:hidden;
}

.box .inner:first-child {
  background-color:#F67280;
  color:#681A1E;
  transform-origin:left;
  transform:perspective(300px) rotateY(-67.3deg);
}

.box .inner:last-child {
  background-color:#FFB6B9;
  color:#FBF2D5;
  transform-origin:right;
  transform:perspective(300px) rotateY(67.3deg);
}

.box .inner span{
  position:absolute;
  animation: marquee 5s linear infinite;
}

.box .inner:first-child span{
  animation-delay:2.5s;
  left:-100%;
}

@keyframes marquee {
  from{
    left:100%;
  }  
  to {
    left:-100%;
  }
}

HTML代码：、

<div class="box">
  <div class="inner">
    <span>Hello World</span>
  </div>
  <div class="inner">               
    <span>Hello World</span>
  </div>
</div>