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

Question

My HTML code is

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

Now, each of these DIVs generates a widget (similar to the one in stock markets). I want to add all of these in a marquee effect which runs endlessly and there is no gap between the last div and the div of the next loop.

I'm a newbie to web development. I've tried using tag but, there is a gap between the ending of the last div and the beginning of the next loop. Also, MDN suggests that I should not use it as it is an obsolete feature.

I want to give it a look similar to the one in stock markets where the entire loop id endless and runs infinitely.

Can anyone suggest me how I can achieve this using CSS3.

Any help would be appreciated. Thanks in advance.

Answer 1

This will help you

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