如何在 HTML5 中使用 CSS3 生成選取框

Question

我的 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 中的每一個都會生成一個小部件（類似於股票市場中的小部件）。 我想將所有這些添加到無限運行的選取框效果中，並且最后一個 div 和下一個循環的 div 之間沒有間隙。

我是網絡開發的新手。 我試過使用標簽，但是在最后一個 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>

小提琴示例