CSS:

/* Marquee styles */
.marquee {
  user-select: none;
  white-space: nowrap;
}
@keyframes scroll {
  from {
    transform: translateX(20vw);
  }
  to {
    transform: translateX(-100vw); /* Vertical is Y vs. X. The high number is there so it looks like it scrolls infinitely without visible choppy looping. If vertical, replace vw with vh. (those respectively size with the width [X] or height [Y] of your viewer's screen.) */
  }
}
/* Enable animation */
.marquee__content {
  animation: scroll 30s linear infinite;
  display: block;
}
.marquee--hover-pause:hover .marquee__content {
  animation-play-state: paused;
}
.marquee__content:hover {
  animation-play-state: paused;
}
/* Attempt to size parent based on content. Keep in mind that the parent width is equal to both content containers that stretch to fill the parent. */
.marquee--fit-content {
  max-width: fit-content;
}

HTML:

<div class="marquee marquee--hover-pause--fit-content">
<span class="marquee__content">
<!-- This is where all your spiffy buttons go. -->
<a href="https://lilithdev.neocities.org/"><img src="https://lilithdev.neocities.org/buttons/lilithdevbtn.gif"></a>
<a href="https://hillhouse.neocities.org"> <img src="https://hillhouse.neocities.org/_images/toybox/_buttons/users/hillhouse3.png" width="88" height="31" alt="hillhouse" style="image-rendering:pixelated"> </a>
<a href="https://poemdoll.neocities.org" target="_blank"><img src="https://i.imgur.com/6J58IeY.png"></a>
<a href="https://kyrn0v.neocities.org" target="_blank" rel="noopener">
<img src="https://kyrn0v.neocities.org/kAssets/kyrn0vgraphics/kNeoLinkButtons/kyrn0vbtn/kyrn0vlinkmebtn.gif" alt="kyrn0v"></a>
<a href="https://confetticake.neocities.org/"><img src="https://confetticake.neocities.org/images/misc/button.gif"></a>
<a href="https://cherrymocha.neocities.org/"><img src="https://file.garden/Z1NrfbbjjD-R7zcB/cherrymocha.png" alt="cherrymocha button"></a>
<a href="https://kkul.neocities.org/"><img src="https://file.garden/aS-t0Aj4K3mdDujK/kkulbutton.gif"></a>
<a href="https://cherubiims.neocities.org" target="_blank"><img src="https://i.imgur.com/fUCDnoH.gif"></a> 
<a href="https://cyberpeach.net"><img src="https://cyberpeach.net/version3/buttons/3.02.png"></a> 
<a href="https://peachmoon.moe"><img src="https://peachmoon.moe/img/peachmoon.gif" loading="lazy"></a>
<a href="https://lazer-bunny.neocities.org"><img src="https://lazer-bunny.neocities.org/Art_Storage/Site_Buttons/Button_88x31.gif"></a>
<a href="https://rhinedottir.neocities.org" target="_blank"><img src="https://rhinedottir.neocities.org/rhinedottir_button.png"></a> 
<a href="https://lydels.neocities.org/" target="_blank" rel="noopener noreferrer"><img src="https://lydels.neocities.org/imagenes/index/lydelsbutton.gif" alt="button"></a>
<a href="https://ne0nbandit.neocities.org/" target="_blank"><img src="https://ne0nbandit.github.io/assets/img/btn/mine/nbbanner.png"></a> 
<a href="https://jugproductions.neocities.org"><img src="https://jugproductions.neocities.org/jugbutton.gif"></a>
 <a href="https://monsieurdoll.neocities.org" target="_blank"><img src="https://file.garden/Zztv0a9yEhr5pmEq/monsieurdoll88x31.png"></a>
 <a href="https://draggianuniverse.neocities.org" target="_blank" rel="noopener noreferrer"><img src="https://draggianuniverse.neocities.org/images/index/button_main.gif" title="Draggian Universe" alt="Draggian Universe"></a>
</span>
</div>
Edit

Pub: 16 Mar 2026 11:23 UTC

Edit: 16 Mar 2026 11:26 UTC

Views: 4