Wie kann ich Marquee mit CSS3 in HTML5

Question

Mein HTML-Code ist

<div class="container1"> 
    <div id="container-table"></div> 
    <div id="container-tablec"></div> 
    <div id="container-tableq"></div> 
    <div id="container-table"></div> 
    <div id="container-table"></div> 
    </div> 

Jetzt erzeugen, wobei jeder dieser DIVs erzeugt ein Widget (ähnlich dem auf den Aktienmärkten). Ich möchte alle diese in einem Marquee-Effekt hinzufügen, der endlos läuft und es gibt keine Lücke zwischen dem letzten Div und dem Div der nächsten Schleife.

Ich bin ein Neuling für Web-Entwicklung. Ich habe versucht, Tag zu verwenden, aber es gibt eine Lücke zwischen dem Ende des letzten Div und dem Anfang der nächsten Schleife. Auch schlägt MDN vor, dass ich es nicht verwenden sollte, da es eine veraltete Eigenschaft ist.

Ich möchte es ein ähnliches Aussehen in den Aktienmärkten, wo die gesamte Schleife id endlos und läuft unendlich.

Kann mir jemand vorschlagen, wie ich dies mit CSS3 erreichen kann.

Jede Hilfe wäre willkommen. Danke im Voraus.

Answer 1

Sie von links nach rechts

/* Sets up our marquee, and inner content */ 
 
.marquee { 
 
    overflow: hidden; 
 
    position: relative; 
 
    padding-left: 100%; 
 
    /* Some browsers may require -webkit-animation */ 
 
    animation: reduce 20s linear infinite; 
 
} 
 

 
.marquee__inner { 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
    /* Some browsers may require -webkit-animation */ 
 
    animation: scroll 20s linear infinite; 
 
} 
 

 

 
/* Creates two white-to-transparent gradients at the ends of the marquee */ 
 
.marquee::before, 
 
.marquee::after { 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 100%; 
 
    content: ""; 
 
    display: block; 
 
} 
 

 
.marquee::after { 
 
    left: auto; 
 
    right: 0; 
 
    transform: rotate(180deg); 
 
} 
 

 
@keyframes reduce { 
 
    to { 
 
    padding-left: 0; 
 
    } 
 
} 
 

 
@keyframes scroll { 
 
    to { 
 
    transform: translateX(-100%); 
 
    } 
 
}

<div class="marquee"> 
 
    <span class="marquee__inner">some text .</span> 
 
</div>

Fiddle Example