在网页设计与开发领域，跑马灯效果常常被用于展示重要信息或吸引用户注意力。通过纯 CSS 实现横向跑马灯，不仅能够提升页面的动态效果，还能避免引入过多 JavaScript 代码，从而提高页面的加载速度和性能。本文将详细介绍如何使用纯 CSS 打造一个具有无缝滚动轮播效果且支持移入悬停功能的横向跑马灯组件。

　　一、HTML 结构搭建

　　首先，构建跑马灯的基本 HTML 结构。我们使用一个容器元素包裹住需要滚动的内容元素。例如：

　　html

　　<p>这是一段需要滚动展示的文本信息。这是一段需要滚动展示的文本信息。这是一段需要滚动展示的文本信息。</p>

　　在上述结构中，.marquee-container 作为外层容器，用于限定跑马灯的范围并设置相关样式。.marquee-content 则是实际包含滚动内容的内部容器，这里放置了一段示例文本，实际应用中可以是图片、链接等各种元素的组合。

　　二、CSS 样式设置

　　1. 容器样式

　　为 .marquee-container 设置基本样式，包括宽度、高度、溢出隐藏等属性，以确保跑马灯区域的显示效果：

　　css

　　.marquee-container {

　　width: 100%;

　　height: 50px; /* 根据需求调整高度 */

　　overflow: hidden;

　　position: relative;

　　}

　　2. 内容样式

　　对 .marquee-content 进行样式设置，使其内部文本水平排列，并设置初始位置：

　　css

　　.marquee-content {

　　white-space: nowrap;

　　position: absolute;

　　left: 0;

　　top: 0;

　　display: flex;

　　align-items: center;

　　}

　　这里的 white-space: nowrap 保证文本不换行，position: absolute 结合 left: 0 和 top: 0 确定其初始左上角位置，display: flex 和 align-items: center 用于垂直居中内容。

　　3. 动画关键帧定义

　　使用 CSS 动画来实现跑马灯的滚动效果，通过 @keyframes 规则定义动画关键帧：

　　css

　　@keyframes marquee {

　　0% {

　　left: 0;

　　}

　　100% {

　　left: -100%; /* 根据内容长度调整移动距离 */

　　}

　　}

　　在这个动画中，从 0% 到 100% 动画过程中，.marquee-content 的 left 属性从 0 逐渐变化到一个负值，这里假设内容宽度为容器宽度的 100%，所以设置为 -100%，实现向左滚动的效果。如果内容长度不同，需要相应调整该值。

　　4. 动画应用与持续时间设置

　　将定义好的动画应用到 .marquee-content 上，并设置动画的持续时间和循环次数：

　　css

　　.marquee-content {

　　animation: marquee 10s linear infinite;

　　}

　　这里设置动画名称为 marquee，持续时间为 10 秒，linear 表示动画匀速进行，infinite 表示动画无限循环。

　　5. 悬停效果实现

　　为了实现当鼠标移入跑马灯区域时暂停滚动的效果，使用 CSS 的 :hover 伪类：

　　css

　　.marquee-container:hover.marquee-content {

　　animation-play-state: paused;

　　}

　　当鼠标悬停在 .marquee-container 上时，.marquee-content 的动画播放状态将被设置为暂停。

　　三、优化与扩展

　　1. 无缝滚动优化

　　上述代码实现了基本的横向滚动，但在滚动到末尾时会有一个跳跃感，不是真正的无缝滚动。为了实现无缝滚动，可以复制一份 .marquee-content 并将其紧跟在原始内容后面，然后调整动画的移动距离：

　　html

      </p>

　　这是一段需要滚动展示的文本信息。这是一段需要滚动展示的文本信息。这是一段需要滚动展示的文本信息。

　　这是一段需要滚动展示的文本信息。这是一段需要滚动展示的文本信息。这是一段需要滚动展示的文本信息。

      </p>

　　css

　　@keyframes marquee {

　　0% {

　　left: 0;

　　}

　　100% {

　　left: -200%; /* 因为有两份内容，所以移动距离加倍 */

　　}

　　}

　　通过这种方式，当第一份内容滚动出去后，第二份内容紧接着开始滚动，实现了无缝衔接的视觉效果。

　　2. 适配不同内容长度

　　如果跑马灯中的内容长度是动态变化的，不能固定动画的移动距离。可以使用 JavaScript 来获取内容的实际宽度，并动态设置 CSS 变量，然后在 CSS 中使用该变量来控制动画移动距离：

　　html

      <p>

　　这是一段可能变化长度的文本信息。

　　这是一段可能变化长度的文本信息。

      </p>

　　javascript

　　const marquee = document.getElementById('marquee');

　　const marqueeText = document.getElementById('marquee-text');

　　const contentWidth = marqueeText.offsetWidth;

　　marquee.style.setProperty('--content-width', `${contentWidth}px`);

　　css

　　@keyframes marquee {

　　0% {

　　left: 0;

　　}

　　100% {

　　left: calc(-1 * var(--content-width));

　　}

　　}

　　这样，无论内容长度如何变化，都能实现准确的无缝滚动效果。

　　通过纯 CSS 实现横向跑马灯的无缝滚动轮播及移入悬停功能，为网页增添了动态和交互性。开发者可以根据实际需求进一步优化和扩展该效果，应用于各种网页项目中，如新闻资讯滚动展示、广告轮播等，提升用户体验和页面吸引力。