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达成的跑马灯效果。