marquee 通过CSS实现滚动效果

<div id=demo style=overflow:hidden;height:70;width:400>
 <div id=demo1>
      <a href='' target='_blank'>这是滚动第1行</a><br>
      这是滚动第2行<br>
      这是滚动第3行<br>
      这是滚动第4行<br>
      这是滚动第5行<br>
      这是滚动第6行<br>
      这是滚动第7行<br>
      这是滚动第8行<br>
    </div>
 <div id=demo2></div>
</div>

var speed = 30
demo2.innerHTML = demo1.innerHTML

function Marquee() {
 if (demo2.offsetTop - demo.scrollTop <= 0)
  demo.scrollTop -= demo1.offsetHeight
 else {
  demo.scrollTop++
 }
}
var MyMar = setInterval(Marquee, speed)
demo.onmouseover = function () {
 clearInterval(MyMar)
}
demo.onmouseout = function () {
 MyMar = setInterval(Marquee, speed)
}

<div class="box">
 <p class="animate">
  文字滚动的内容
 </p>
</div>

.box {
 width: 300px;
 margin: 0 auto;
 border: 1px solid #ff6700;
 overflow: hidden;
}

.animate {
 padding-left: 20px;
 font-size: 12px;
 color: #000;
 display: inline-block;
 white-space: nowrap;
 animation: 10s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
 0% {
  transform: translateX(200px);
  -webkit-transform: translateX(200px);
 }
 100% {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
 }
}

@-webkit-keyframes wordsLoop {
 0% {
  transform: translateX(200px);
  -webkit-transform: translateX(200px);
 }
 100% {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
 }
}