网站滚动文字代码：网站滚动文字代码，实现动态文字效果的两种方法

来源：网络作者：日期：2025-11-01 18:37:04

在现代网站设计中,动态效果能够有效吸引用户注意力，提升用户体验，滚动文字是一种简单而实用的动态效果，常用于页眉、页脚或广告区域，本文将介绍如何使用HTML、CSS和JavaScript实现网站滚动文字效果，并提供完整代码示例。

什么是滚动文字？

滚动文字是指文字在网页上水平或垂直移动的效果,通常用于展示新闻标题、广告语或重要通知，这种效果可以增强页面的活力，同时引导用户关注特定内容。

网站滚动文字代码：网站滚动文字代码，实现动态文字效果的两种方法

使用CSS实现水平滚动文字

CSS动画可以轻松实现文字的水平滚动效果,以下是一个简单的示例：

网站滚动文字代码：网站滚动文字代码，实现动态文字效果的两种方法

HTML代码：

<div class="scrolling-text">
  欢迎访问我们的网站！这是一个滚动文字效果示例，欢迎访问我们的网站！这是一个滚动文字效果示例。
</div>

CSS代码：

.scrolling-text {
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  width: 100%; /* 设置容器宽度 */
  background: #f0f0f0; /* 背景色 */
  padding: 10px; /* 内边距 */
}
.scrolling-text span {
  display: inline-block; /* 将文字设置为行内块元素 */
  padding-left: 100%; /* 初始位置在容器外 */
  animation: scroll 10s linear infinite; /* 应用滚动动画 */
}
@keyframes scroll {
  0% { transform: translateX(0); } /* 起始位置 */
  100% { transform: translateX(-100%); } /* 结束位置 */
}

效果说明：

文字从右向左滚动,完成后无缝循环。
动画持续时间为10秒,可根据需要调整。
通过white-space: nowrap防止文字换行，确保滚动效果流畅。

使用JavaScript实现更灵活的滚动文字

如果需要更复杂的控制（如随机文字、暂停功能等），可以使用JavaScript实现滚动文字效果。

HTML代码：

<div id="scrolling-text-container">
  <span id="scrolling-text">欢迎访问我们的网站！这是一个滚动文字效果示例。</span>
</div>

JavaScript代码：

const textElement = document.getElementById('scrolling-text');
const text = textElement.textContent;
textElement.textContent = '';
// 设置滚动速度（毫秒）
const scrollSpeed = 100;
let position = 0;
function scrollText() {
  position -= 1;
  if (position < -text.length) {
    position = 0;
  }
  textElement.innerHTML = text.substring(position, text.length) + 
                          '<span style="opacity:0">' + 
                          text.substring(0, position) + 
                          '</span>';
  setTimeout(scrollText, scrollSpeed);
}
// 启动滚动
scrollText();