前端实现文本横向滚动并在左边文字未完全消失时开始出现右边文字

当要在前端实现文本横向滚动并在左边文字未完全消失时开始出现右边文字时，可以使用HTML、CSS来实现这一效果。在这篇技术博客中，我们将讨论如何通过一个实际的示例来实现这种滚动效果。

引言

在Web应用中，文本滚动效果是一种常见的需求，它可以用于展示新闻标题、通知、广告等内容。通常情况下，文本滚动是从右向左无缝滚动，当滚动到文本末尾时，新的文本会从左侧无缝滚动进入，以持续吸引用户的注意力。

技术实现

HTML结构

首先，我们需要创建一个HTML结构，用于包含要滚动的文本。以下是一个示例的HTML结构：

<div class="pages-label-tips">
     <ul class="demoContent" ref="scrollingText">
         <li class="content1 bitch">
            监控一定时期内采用非“公开招标”及“邀请招标”采购方式的项目，同一实施主体名称、同一项目名称、同一采购对象类型的估算总价之和>法定招标限额，其中法定招标限额：服务类100万，物资类200万，施工类400万。
            <div class="tail">【化整为零规避招标】指标描述：</div>
          </li>
          <li class="content2 bitch">
            监控一定时期内采用非“公开招标”及“邀请招标”采购方式的项目，同一实施主体名称、同一项目名称、同一采购对象类型的估算总价之和>法定招标限额，其中法定招标限额：服务类100万，物资类200万，施工类400万。
            <div class="tail">【化整为零规避招标】指标描述：</div>
          </li>
          <li class="content3 bitch">
            监控一定时期内采用非“公开招标”及“邀请招标”采购方式的项目，同一实施主体名称、同一项目名称、同一采购对象类型的估算总价之和>法定招标限额，其中法定招标限额：服务类100万，物资类200万，施工类400万。
            <div class="tail">【化整为零规避招标】指标描述：</div>
          </li>
          <li class="content4 bitch">
            监控一定时期内采用非“公开招标”及“邀请招标”采购方式的项目，同一实施主体名称、同一项目名称、同一采购对象类型的估算总价之和>法定招标限额，其中法定招标限额：服务类100万，物资类200万，施工类400万。
            <div class="tail">【化整为零规避招标】指标描述：</div>
          </li>
    </ul>
</div>

CSS样式

接下来，我们使用CSS来定义滚动文本的样式和动画效果。在CSS中，我们使用@keyframes来定义滚动动画，并应用于文本内容。以下是示例的CSS样式：

.pages-label-tips {
  /* 容器样式，用于限定文本宽度和显示区域 */
  width: 1550px;
  font-size: 14px;
  color: #19ab7a;
  background-color: rgba(237, 255, 251, 1);
  margin-left: 15px;
  position: relative;
  transform-style: preserve-3d;
  overflow: hidden;
}

.demoContent {
  /* 滚动内容样式 */
  width: 7500px; /* 设置内容宽度，根据实际需求调整 */
  height: 14px; /* 设置内容高度，根据实际需求调整 */
  position: relative;
  animation: scrollLeft 50s linear infinite; /* 应用滚动动画 */
  list-style: none; /* 去除列表样式 */
}

.bitch {
  /* 单个滚动项样式 */
  width: 2500px; /* 设置每个项的宽度，根据实际需求调整 */
  position: absolute;
  top: 0;
}

/* 滚动动画定义 */
@keyframes scrollLeft {
  0% {
    transform: translateX(0); /* 初始位置 */
  }
  100% {
    transform: translateX(-100%); /* 最终位置，实现从右向左滚动 */
  }
}

.tail {
  /* 文本描述样式 */
  position: absolute;
  top: 0;
  right: 0;
}

结语

在本文中，我们演示了如何使用HTML、CSS来实现前端文本的横向滚动效果，同时可以添加监听和js实现鼠标放入离开滚动暂停和开始的效果及根据文本和容器的宽度来调整滚动的速度。这种效果可以应用于各种前端应用中，例如新闻滚动、通知消息等。希望这篇博客能帮助你实现自己的文本滚动需求。