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