css3 跑马灯效果详解

作者:袖梨 2022-06-25

在手机端实现跑马灯效果,可以直接使用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 跑马区域的背景颜色



相关文章

精彩推荐