css3实现文字跑马灯（css3跑马灯demo）

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

　　2. -webkit-marquee-style:slide;

　　3. -webkit-marquee-style:alternate;

HTML：

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

二、纯css3跑马灯demo

1、基本思路

　　这次demo主要是通过css3中的animation动画实现，借助transform中的translateY属性的增减实现dom位置的变化，让它跑起来。

html：

css：

.marquee div {     display: block;     width: 100%;     text-align: center;     position: absolute;     overflow: hidden;     -webkit-animation: marquee 15s linear infinite;     animation: marquee 15s linear infinite; } @keyframes marquee {     0% {         transform: translateY(-25);     }     100% {         transform: translateY(-675px); // 每行高50     } }

　　原理的根本就是让闪跳的前一帧和后一帧的位置重合，而此时下一条文本还没有完全露出，视觉上基本达到无缝连接状态。如果容器内会同时出现两条或以上文本内容时，可以在class=“label_txt”位置再添加首尾项，实现动画的链接。综上我们就实现了完全由css3达成的跑马灯效果。