css3实现文字跑马灯(css3跑马灯demo)

css3实现文字跑马灯(css3跑马灯demo),第1张

  一、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;

  css3实现文字跑马灯(css3跑马灯demo),css3实现文字跑马灯(css3跑马灯demo),第2张

  2. -webkit-marquee-style:slide;

 css3实现文字跑马灯(css3跑马灯demo),css3实现文字跑马灯(css3跑马灯demo),第3张

  3. -webkit-marquee-style:alternate;

css3实现文字跑马灯(css3跑马灯demo),css3实现文字跑马灯(css3跑马灯demo),第4张

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


					

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/dianzi/2717902.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-08-17
下一篇 2022-08-17

发表评论

登录后才能评论

评论列表(0条)

保存