最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css3 跑马灯效果详解
时间:2016-10-25 编辑:简简单单 来源:一聚教程网
具体代码实现:
首先指定溢出时滚动: 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
-
上一个: css快速的导航下拉菜单动画效果
相关文章
- 用CSS3来实现逐渐发光的方格边框 05-17
- CSS3背景下的@font face有什么规则 05-06
- 详解CSS3中nth-child与nth-of-type的区别 01-10
- CSS3,线性渐变(linear-gradient)的使用总结 01-10
- CSS3动画特效制作教程 好看的CSS3动画特效 01-04
- CSS3 Flexbox属性用法大全 CSS3 Flexbox各种属性详解 01-04