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/




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM