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