使用css3制作文字横向无限循环滚动的动画
/**
设置宽,溢出隐藏
*/
.marquee-outer-wrapper{
overflow: hidden;
width: 80%;
}
.marquee-inner-wrapper{
background: #eee;
height: 40px;
font-size: 14px;
color: red;
line-height: 40px;
margin: 0 auto;
white-space: nowrap;
position: relative;
}
/* 需要将两个文字内容一样的span放在最右边 */
.marquee-inner-wrapper span{
position: absolute;
top: 0;
left: 100%;
height: 100%;
}
/* 定义第一个span的animation:时长 动画名字 匀速 循环 正常播放 */
.first-marquee{
-webkit-animation: 25s first-marquee linear infinite normal;
animation: 25s first-marquee linear infinite normal;
padding-right: 70%;
}
@keyframes first-marquee {
0% {
-webkit-tr