css字幕滚动代码 （小编来一起）解决问题的处理方法，对大家解决问题具有一定的参考价值

  本文介绍了纯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.

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;
 }

  推荐答案

  您可以尝试使用两个字幕并将其中一个动画的延迟动画设置为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);
}

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屋！