Html 跑马灯效果

Html-跑马灯效果.txt

marquee

marquee是已经废弃、过时的标签，不推荐使用！在Chrome不同版本中有很多bug，如，Chrome45.0中动画执行完总是需要点一下页面才能继续，
最新版的Chrome52.0则没有这个问题。

虽然已经过时，有时候还是不得已用到，这里简单对几个属性做一下介绍。

behavior : 可用的值为scroll(滚动)、slide(滑动)、alternate(改变，类似于光学的反射路径)，如果没有指定值，默认是scroll
direction : 设置方向，可用的值为left、right、up、down，如果没有指定值，默认是left
scrollamount : 控制速度
scrolldelay : 延时

示例：

<h1>兼容性说明：</h1>
<p>marquee是已经废弃的标签，不推荐使用！在Chrome不同版本中有很多bug，如，Chrome45.0中动画执行完总是需要点一下页面才能继续，最新版的Chrome52.0则没有这个问题。</p>

<h1>默认：</h1>
<marquee>人类同处一个地球，“地球村”的每个成员，如何携手共进？</marquee>

<h1>来回滚动：</h1>
<marquee behavior="alternate" direction="left" scrollamount="10" scrolldelay="50">人类同处一个地球，“地球村”的每个成员，如何携手共进？</marquee>

<h1>循环滚动：</h1>
<marquee behavior="scroll" direction="right" scrollamount="10" scrolldelay="50">人类同处一个地球，“地球村”的每个成员，如何携手共进？</marquee>

<h1>右下往上滚动：</h1>
<marquee behavior="scroll" direction="up" scrollamount="10" scrolldelay="50" style="height:200px;background:#ccc;">人类同处一个地球，“地球村”的每个成员，如何携手共进？</marquee>

<h1>会反弹的文字：</h1>
<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid 2px black;">
    <marquee behavior="alternate" width="250" >这个文本会反弹哦</marquee>
</marquee>