走马灯效果（html+css+js）

走马灯效果通常指的是文字滚动显示，类似于新闻滚动或者公告栏的效果。以下是一个简单的HTML、CSS和JavaScript结合的走马灯效果实现：

HTML:

<div id="marquee-container">
  <p id="marquee-text">这是走马灯效果的文本，将会从右向左滚动显示。</p>
</div>

CSS:

#marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
 
#marquee-text {
  display: inline-block;
  animation: marquee 10s linear infinite;
}
 
@keyframes marquee {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

JavaScript (可选，用于处理文本长度动态调整滚动速度):

function adjustMarqueeSpeed(textElement, containerWidth) {
  const textWidth = textElement.getBoundingClientRect().width;
  if (textWidth > containerWidth) {
    const duration = textWidth / containerWidth * 10; // 10s基础上根据文本长度调整
    textElement.style.animationDuration = `${duration}s`;
  }
}
 
window.onload = function() {
  const container = document.getElementById('marquee-container');
  const text = document.getElementById('marquee-text');
  adjustMarqueeSpeed(text, container.offsetWidth);
};

这段代码实现了一个基本的走马灯效果。@keyframes定义了名为marquee的动画，通过改变transform的translateX值实现滚动效果。JavaScript 代码用于在页面加载完成后调整走马灯的滚动速度，使得当文本长度超出容器宽度时可以更慢或者更快地滚动。