css3 跑马灯效果详解

时间：2022-06-25 08:56:49 编辑：袖梨来源：一聚教程网

在手机端实现跑马灯效果，可以直接使用css3实现；

具体代码实现：

首先指定溢出时滚动： overflow:-webkit-marquee;

跑马灯样式，分三种： -webkit-marquee-style:scroll | slide | alternate;

scroll，从一端滚动到另一端，内容完全滚入（消失）时重新开始。

slide，从一端滚到另一端，内容接触到另一端后，立马重新开始。(ios实测和scroll一致)

alternate，内容不跑到显示区域外，在里面来回碰壁反弹。这里主要用第一种。

跑马灯跑的次数：-webkit-marquee-repetition:infinite | number
infinite 为无限多次，不结束。或者可以用正整数设置滚动的次数。

*跑动的方向：-webkit-marquee-direction:up | down | left | right;

*跑动的速度： -webkit-marquee-speed:slow | normal | fast;

例子

html

跑马灯大全

参数	用法介绍
behavior=scroll, slide, alternate	跑马方式：循环绕行，只跑一次就停住，来回往复运动
direction=left,right	跑马方向：从左向右，从右向左
loop=100	跑马次数：循环100次，如不写默认为一直循环
width=100%,height=200	跑马范围：宽为100%，高为200像素
scrollamount=20	跑马速度：数越大越快
scrolldelay=500	跑马延时：毫秒数，利用它可实现跃进式滚动
hspace=20，vspace=20	跑马区域与其它区域间的空白大小
bgcolor=#00FFCC	跑马区域的背景颜色