Wie erreicht man mit CSS3 ein nahtloses kreisförmiges Scrollen von Nachrichtentexten? (Beispiel)

In diesem Artikel wird hauptsächlich die Verwendung von CSS3 vorgestellt, um eine nahtlose Verbindung und einen ununterbrochenen Schleifeneffekt zu erzielen. Diese CSS-Animationsschleife gilt nicht nur für Bilder, sondern auch für Textfelder usw. Solange Sie verstehen, was sie gemeinsam haben, was ihre Hauptgedanken sind, können Sie Rückschlüsse auf andere Fälle ziehen.

1. Das spezifische HTML-Codebeispiel lautet wie folgt:

<div class="list">
    <div class="cc rowup">
        <div class="item">1- 这是一段新闻描述一</div>
        <div class="item">2- 这是一段新闻描述二</div>
        <div class="item">3- 这是一段新闻描述三</div>
        <div class="item">4- 这是一段新闻描述四</div>
        <div class="item">5- 这是一段新闻描述五</div>
        <div class="item">6- 这是一段新闻描述六</div>
        <div class="item">7-这是一段新闻描述七</div>
  <div class="item">8-这是一段新闻描述八</div>
     <div class="item">9- 这是一段新闻描述</div>
        <div class="item">1- 这是一段新闻描述一</div>
        <div class="item">2- 这是一段新闻描述二</div>
        <div class="item">3- 这是一段新闻描述三</div>
        <div class="item">4- 这是一段新闻描述四</div>
        <div class="item">5- 这是一段新闻描述五</div>
        <div class="item">6- 这是一段新闻描述六</div>
        <div class="item">7- 这是一段新闻描述七</div>
        <div class="item">8- 这是一段新闻描述八</div>
     <div class="item">9- 这是一段新闻描述</div>
    </div>
</div>

2. Der spezifische CSS-Code lautet wie folgt:

@keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -307px, 0);
        transform: translate3d(0, -307px, 0);
    }
}
.list{
    width: 300px;
    border: 1px solid #999;
    margin: 20px auto;
    position: relative;
    height: 200px;
    overflow: hidden;
}
 
.list .rowup{
    -webkit-animation: 10s rowup linear infinite normal;
    animation: 10s rowup linear infinite normal;
    position: relative;
}

Die Hauptidee der oben genannten Implementierung CSS-Schleifenanimation ist:

Wenn wir beispielsweise einen nahtlosen Aufwärtsschleifenanimationseffekt erstellen möchten, können wir die identischen Daten B von A kopieren und hinter den Originaldaten A platzieren. Verwenden Sie setInterval, um den übergeordneten Container von A nach oben zu scrollen ; wenn die Aufwärts-Scrolldistanz L genau mit der von A übereinstimmt. Wenn die Höhe (L==A.height()) ist, L=0, beginnt das Scrollen erneut und die Schleife ist endlos.

Kopieren Sie die Daten und platzieren Sie sie hinten, sodass bei der Bewegung von A nach oben Daten hinten vorhanden sind, um die Lücken zu füllen. Wenn sich B an den oberen Rand des sichtbaren Bereichs bewegt und A sich gerade aus dem sichtbaren Bereich bewegt, wird der Container auf 0 zurückgesetzt. Der Benutzer nimmt dies nicht wahr und denkt, es sei immer noch das erste Datenelement in B. Dann scrollen Sie weiter nach oben.

Hinweis:

Wenn Sie CSS3-Attribute zur Implementierung verwenden möchten, muss es sich um eine Animation handeln, da der Übergang manuell ausgelöst werden muss und nicht unbegrenzt ausgeführt werden kann. Eine Animation kann dieses Problem lösen. .

Dieser Artikel ist eine Einführung in die CSS-Animationsschleife. Ich hoffe, er wird Freunden in Not hilfreich sein.

Das obige ist der detaillierte Inhalt vonWie erreicht man mit CSS3 ein nahtloses kreisförmiges Scrollen von Nachrichtentexten? (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!