html中的横向广告滚动字幕,纯css3制作无限循环横向滚动的文字广告动画

html中的横向广告滚动字幕,纯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