User:4erospace/sandbox: Difference between revisions

m CSS test
m CSS test
Line 1: Line 1:
{{#css:
<div class="news-wrapper">
 
<div class="news-marquee">
  .wrapper {
    max-width: 100%;
    overflow: hidden;
  }
 
  .marquee {
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    animation: marquee 10s linear infinite;
  }
 
  .marquee p {
    display: inline-block;
  }
 
  @keyframes marquee {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-50%, 0, 0);
    }
  }
 
}}
 
<div class="wrapper">
<div class="marquee">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat, ante eu bibendum tincidunt, sem lacus vehicula augue, ut suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat, ante eu bibendum tincidunt, sem lacus vehicula augue, ut suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat, ante eu bibendum tincidunt, sem lacus vehicula augue, ut suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat, ante eu bibendum tincidunt, sem lacus vehicula augue, ut suscipit.</p>
</div>
</div>
</div>
</div>