HTML结构如下：<div class="marquee"><div><span>marquee标签拥有很多的动效，可惜遭到HTML5废弃，本文利用css3模拟其水平滚动效果。</span></div
HTML结构如下：
<div class="marquee"><div><span>marquee标签拥有很多的动效，可惜遭到HTML5废弃，本文利用css3模拟其水平滚动效果。</span></div></div>原本一层DIV足够，又加了一层是为了增加左右的空白间隙。
然后就可以应用transform动画了：
.marquee { height: 36px; line-height: 36px; color: #f90; background-color: #ffc; border-top: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; box-sizing: border-box; word-break: break-all; white-space: nowrap; div { margin: 0 10px; overflow: hidden; } span { display: inline-block; padding-left: 100%; /* 从右至左开始轮播 */ -webkit-animation: marquee 16s linear infinite; animation: marquee 16s linear infinite; } span:hover { /* 鼠标点击时暂停轮播 */ -webkit-animation-play-state: paused; animation-play-state: paused; }}/* Make it move */@-webkit-keyframes marquee { 0% { -webkit-transform: translate(0, 0); } 100% { -webkit-transform: translate(-100%, 0); }}@keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); }}方案源于stackoverflow：css3-marquee-effect
