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/