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

预览地址

html 文字跑马灯效果,CSS3 长文字跑马灯效果相关推荐

html文字加描边效果,CSS3实现文字描边效果
以前想实现文字描边效果只能用PS制作图片,现在我们可以用CSS3就可以实现文字描边效果其实,不用图片还可以文字描边哦,下面看青岛星网的实现方式. CSS3实现文字描边效果,这里主要用到text-sha ...
css 霓虹灯转动效果,CSS3霓虹灯文字动画特效
这是一个完全由CSS3实现的霓虹灯文字动画特效,虽然看起来有flash的质感和js驱动的错觉,但事实上你可以看到所有代码如下:html> CSS3霓虹灯文字特效 .text-effect { o ...
html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
html5圆圈动画效果,CSS3实现光感圆圈动画效果
CSS3实现光感圆圈动画效果全部代码 html> CSS3实现光感圆圈动画效果 body { background: #111; } .halo { transition: .4s all; } ...
html一段文字弹窗提示代码,css3提示文字弹窗代码
不需要额外的javascript代码,你可以通过使用css3样式来创建一个类似的效果. Css代码 [data-tips] { position: relative; text-decoration: ...
css中文字闪烁这么实现,css3实现文字闪烁，改变透明度
智慧大石 CSS3的animation即可: hello world
html如何添加加载动画效果,CSS3创建加载动画效果
加载动画在网页设计中是很常见的.用户们都希望网页加载又快又流畅而不是盯着屏幕苦等,而加载动画能够在内容加载完成前给用户视觉反馈,从而能够吸引用户而不让他们直接放弃继续浏览你的网站. 创建加载效果所需的 ...
html 晃动效果,css3特效（上下左右晃动效果）
Document .animated { animation-duration: 2s; /*动画时间*/ animation-fill-mode: both; /*播放后的状态*/ } .anima ...
html5 火焰效果图,css3火焰文字特效
这是一款效果非常炫酷的css3火焰文字特效.该css3火焰文字特效仅用10行代码就可以实现,效果特别炫酷. 使用方法 HTML结构使用任意元素来包裹要实现火焰文字特效的文字. jQuery之家 CS ...

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

html 文字跑马灯效果,CSS3 长文字跑马灯效果相关推荐

最新文章

热门文章

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

html 文字 跑马灯效果,CSS3 长文字跑马灯效果相关推荐

最新文章

热门文章

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

html 文字跑马灯效果,CSS3 长文字跑马灯效果相关推荐