[css3]跑马灯

<div class="marquee">
    <div>
        <p>纯CSS3生成的走马灯效果</p>
        <p>纯CSS3生成的走马灯效果</p>
    </div>
</div>

/* 定义一个走马灯动画 */

@-webkit-keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
}
@keyframes marquee {
    0%{left:0}
    100%{left: -100%}
}

.marquee {
    height: 30px;
    overflow: hidden;
    position: relative;
}

.marquee div {
    display: block;
    width: 200%;
    height: 30px;
    position: absolute;
    overflow: hidden;
    -webkit-animation: marquee 4s linear infinite;
    animation: marquee 4s linear infinite;
}