当前位置：首页 > 行业动态 > 正文

html滚动的文字

使用CSS动画实现文字滚动：设置容器 overflow:hidden，定义 @keyframes控制位移，通过 animation属性循环播放，实现水平或

实现方式与原理

CSS动画实现滚动文字

通过CSS的@keyframes定义文字移动轨迹，结合animation属性控制动画循环。

属性 说明 示例值
animation-name 绑定关键帧名称 scroll-text
animation-duration 滚动周期（秒） 10s
animation-timing-function 速度曲线 linear
animation-iteration-count 循环次数 infinite
animation-direction 滚动方向 normal 
@keyframes scroll-text {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.scroll-text {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  animation: scroll-text 10s linear infinite;
}

JavaScript动态控制

利用setInterval定时修改元素位置,或通过DOM操作模拟滚动。

html滚动的文字 第1张

const textContainer = document.querySelector('.js-scroll');
let x = textContainer.offsetWidth;
setInterval(() => {
  x -= 1;
  if (x < -textContainer.scrollWidth) x = textContainer.parentElement.offsetWidth;
  textContainer.style.transform = `translateX(${x}px)`;
}, 30); // 每30ms移动1px

已弃用的<marquee>

HTML5已废弃该标签,但部分低版本浏览器仍支持。

<marquee behavior="scroll" direction="left" scrollamount="5">滚动文字</marquee>

兼容性与优化方案

场景 解决方案
移动端性能问题 使用CSS动画代替JS，减少重绘消耗
IE低版本支持 添加-ms-前缀或降级使用<marquee>
文字长度自适应 通过JavaScript动态计算容器宽度与文字长度差
多行文本滚动 将多行文本拆分为多个<span>元素，依次延迟启动动画

扩展功能实现

功能 实现要点
鼠标悬停暂停 添加:hover伪类暂停动画
点击跳转链接 在滚动文本中嵌入<a>标签，需保证动画不影响链接区域
渐变透明度 配合opacity属性在关键帧中设置渐变效果
弹性滚动效果 使用cubic-bezier函数定义非线性运动曲线

相关问题与解答

Q1：如何控制滚动文字的速度和方向？
A1：通过调整CSS动画的duration参数改变速度，修改animation-direction或translateX的正负值控制方向。 

/ 加快速度 /
animation: scroll-text 5s linear infinite;
/ 改为从右到左滚动 /
@keyframes scroll-text {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

Q2：在移动端为什么推荐使用CSS而非JavaScript？
A2：CSS动画由浏览器硬件加速渲染，功耗更低且流畅度高，而JavaScript定时器会强制CPU持续运算，导致设备发热和卡顿，CSS动画在页面不可见时会自动暂停（visibilitychange事件），

0

相关文章