纯css实现文字跑马灯Marquee, 兼容各种长度的文字

<marquee>是老的html中自动实现文字从左向右滚动播放的标签。新的浏览器中不一定支持了。

但是可以通过css3实现， 兼容各种长度的文字，自适应容器宽度。

codepen 在线示例

<div class="cssmarquee">
  <div class="wrapper">
    <p class="marqueeWords">
      Hello world!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;热烈庆祝程序员节！&nbsp;&nbsp;May you have a happy day!&nbsp;&nbsp;God bless  you!&nbsp;&nbsp;Thanks you!&nbsp;&nbsp;
    </p>
  </div>
</div>

.cssmarquee {
  position: relative;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 24px;
  background: rgba(255, 255, 255, .6);
  overflow: hidden;
}
.cssmarquee .wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: cssmarqueeWra