はどのように私はHTML5

Question

でCSS3を使用してマーキーを生成することができます

私のHTMLコードは、今

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

、これらdiv要素のそれぞれは、（株式市場の1に類似）ウィジェットを生成しています。私は無限に走るマーキーエフェクトにこれらのすべてを追加したいと思います。最後のdivと次のループのdivの間には隙間がありません。

私はWeb開発の初心者です。私はタグを使用しようとしましたが、最後のdivの終わりと次のループの始まりの間にはギャップがあります。また、MDNは、として廃止されたフィーチャーであるため、使用しないでください。

ループIDが無限に続き、無限に実行されている株式市場に似ています。

どのように私はCSS3を使用してこれを達成することができます私を提案することができます。

ご協力いただければ幸いです。前もって感謝します。

Answer 1

これは、あなたが

/* 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