html css跑马灯效果,css3实现文字跑马灯(css3跑马灯demo)

本文详细介绍了如何使用CSS3的-webkit-marquee属性来创建文字跑马灯效果,包括设置滚动方向、速度、样式和重复次数等关键参数。通过实例展示了scroll、slide和alternate三种滚动方式的不同效果,帮助开发者实现动态的文字展示效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

49898f5199314b2d15d9fb0c28c93c2b.png

2. -webkit-marquee-style:slide;

917decb1c06f68c1b48c6598e22356a8.png

3. -webkit-marquee-style:alternate;

1d0e64d73e4ef6f8e711cb556a94280f.png

HTML:

这是一个滚动字幕。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值