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
