[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;

}