怎樣才能在HTML5

-1

使用CSS3我生成字幕

<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生成一個widget（一個類似於股票市場）。我想添加所有這些在marquee效果其中無休止地運行，最後div和下一個循環的div之間沒有差距。

我是網站開發的新手。我試過使用標籤，但是，最後一個div的結尾和下一個循環的開始之間存在差距。另外，MDN建議我不應該使用它，因爲它是已過時的功能。

我想給它看起來類似於股票市場，整個循環id無盡和無限運行。

任何人都可以建議我如何使用CSS3來實現這一點。

任何幫助，將不勝感激。提前致謝。

來源

2017-07-14 Will

全部由右至左一條線或5運行從左至右運行？ – Hash

我知道你提出了一些建議，但不幸的是，新人會替你寫代碼，這是一個無關緊要的問題，包括應該怎麼做的意見。我們可以幫助您編寫標記和編寫代碼，但我們無法爲您編寫代碼，他們的回覆會導致此問題關閉。 – Rob

全部從右到左在一行中無限制地運行，沒有任何中斷，第一個循環結束後第五個循環結束，第二個循環應立即啓動。 – Will

這將幫助你

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

來源

2017-07-14 10:42:35

怎樣才能在HTML5

回答

相關問題