转角跑马灯

跑马灯

跑马灯

`
/*HTML*/
div.marquee
    div>span{跑马灯}
    div>span{跑马灯}
/*CSS*/
.marquee{
  margin-top:3rem;
  perspective:500px;
  font-size:0;
  font-family:"Microsoft YaHei", "Segoe UI", "Lucida Granda", Helvetica, Arial;
}

.marquee div{
  display:inline-block;
  height:12rem;
  width:30rem;
  position:relative;
}
.marquee div{
  font-size:8rem;
  overflow:hidden;
}
.marquee div span{
  position:absolute;
  width:400%;
  line-height:1.4;
}
.marquee div:first-of-type{
  background:#e5233e;
  transform-origin: top right;
  transform: rotateY(-40deg);
  color:#fff;
}
.marquee div:last-of-type{
  background:#b31e31;
  transform-origin:top left;
  transform:rotateY(45deg);
  color:#f8c9d9;
}
@keyframes leftcrawl{
  to{   transform:translateX(-100rem);
}
}
@keyframes rightcrawl{
  to{
    transform:translateX(-100rem);}
}

.marquee div:first-of-type span{
  transform:translateX(60rem);
  animation:leftcrawl 14s linear infinite;
  text-shadow:4px 0 4px rgba(0,0,0,0.3);
}
.marquee div:last-of-type span{
  transform:translateX(43rem);
  animation:rightcrawl 14s ease-out infinite;
}
}
`