html5 css3 marquee,css3 marquee

HTML结构如下：

marquee标签拥有很多的动效，可惜遭到HTML5废弃，本文利用css3模拟其水平滚动效果。

原本一层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); }

}