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