本文介绍了纯CSS连续水平文本滚动不间断的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

  问题描述

  我正在尝试创建一个带有水平文本的新闻自动收录器，该文本可以连续滚动而不会在循环之间中断。理想情况下，解决方案将是纯CSS / HTMLcss字幕滚动代码，但我不知道是否可行。到目前为止，这是我的基本尝试： 。请注意，小提琴在每个循环之间都包含一个不必要的中断。

  I'm trying to create a news ticker with horizontal text that scrolls continuously without a break between loops. Ideally, the solution would be pure css/html, but I don't know if that's possible. Here's my rudimentary attempt so far: Note that the fiddle contains an unwanted break between each loop.

   <p class="marquee">This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text

    .marquee {
        margin: 0 auto;
        white-space: nowrap;
        overflow: hidden;
    }
    .marquee span {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 5s linear infinite;
    }

</p>

  推荐答案

  您可以尝试使用两个字幕并将其中一个动画的延迟动画设置为2.5scss字幕滚动代码，这是完整动画（5s）的一半。

  You could try having two marquees and set one of them with a delayed animation of 2.5s which is half the time of the full animation (5s).

   .marquee {

      margin: 0 auto;
      white-space: nowrap;
      overflow: hidden;
      position: absolute;
    }
    .marquee span {
      display: inline-block;
      padding-left: 100%;
      animation: marquee 5s linear infinite;
    }
    .marquee2 span {
      animation-delay: 2.5s;
    }
    @keyframes marquee {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(-100%, 0);
      }

   <p class="marquee">

      This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - 
    

      
      This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - 

  这篇关于纯CSS连续水平文本滚动不间断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！