CSS3 实现滚动字幕效果（即跑马灯）

CSS：

.marquee {

　　white-space: nowrap;　　/* 文字不折行 */

　　overflow:-webkit-marquee;　　/* 只有设置为marquee才有滚动效果 */

　　width: 170px;　　/* 不是必须的 */

　　-webkit-marquee-direction:left;　　/* 文字滚动方向 可选值为left | right | up | down */

　　-webkit-marquee-speed:normal;　　/* 文字滚动速度 可选值为slow | normal | fast */

　　-webkit-marquee-style:scroll;　　/* 文字滚动方式 可选值为scroll | slide | alternate */

　　-webkit-marquee-repetition:1; 　　/* 文字滚动次数 number | infinite ， infinite即无限次循环滚动 */

}

-webkit-marquee-style 各值效果如下：

    1. -webkit-marquee-style:scroll;

　　　　　　　　　　

   2. -webkit-marquee-style:slide;

　　　　　　　　　　

  3. -webkit-marquee-style:alternate;

　　　　　　　　　　

HTML:

　　<p class="marquee">这是一个滚动字幕。</p>

注：这里的代码需要用chrome或safari测试，在IE下可以用marquee标签代替此功能，不介绍。

参考：http://www.w3.org/TR/css3-marquee/

转载于:https://www.cnblogs.com/h5n1/archive/2012/03/03/2378397.html