html 文字 跑马灯效果,CSS3 长文字跑马灯效果

raw js + css3 transition 跑马灯测试。跑马灯测试。跑马灯测试。

@keyframes kf-marque-animation {

0% {

transform: translateX(0);

}

100% {

transform: translateX(-33.3%);

}

}

.marquee {

width: 100%;

height: 44px;

line-height: 44px;

background: #e9eaea;

display: block;

margin: 0 auto;

overflow: hidden;

white-space: nowrap;

text-overflow: clip;

position: relative;

}

.marquee .content {

display: inline-block;

position: relative;

padding-right: 0px;

white-space: nowrap;

animation: kf-marque-animation 12s infinite linear;

}

.marquee .content-space {

display: inline-block;

width: 5em;

}

//滚动

(function () {

var speed = 50; // 速度 -- px每秒

var $marquee = document.querySelector('.marquee');

var $marqueeContent = $marquee.querySelector('.content');

// 内容复制3份好有连续性

$marqueeContent.innerHTML = $marqueeContent.innerHTML + $marqueeContent.innerHTML + $marqueeContent.innerHTML

var contentWidth = $marqueeContent.getBoundingClientRect().width;

if (contentWidth <= 0) { // 没有内容搞什么动画

return;

}

// 内容复制了3份，宽度也要除以3

contentWidth = contentWidth / 3

// 计算一次动画应该要花费多少时间

var onceTime = contentWidth / speed * 1000; //ms

$marqueeContent.style.animationDuration = onceTime + "ms"

})()

小程序可用 CSS3 animation 实现的跑马灯https://segmentfault.com/a/1190000009571886

预览地址