Webleb - Snippets de Código -

Abrir no Editor Publique Seu Código

Recomendado

30 March 2025

Um Código por mironovbogdan341

26 May 2025

.scroller {
    max-width: 900px;
  }
  
  .scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
      90deg,
      transparent,
      white 20%,
      white 80%,
      transparent
    );
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
  }
  
  .scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
      var(--_animation-direction, forwards) linear infinite;
  }

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
  }
  
  .scroller[data-speed="fast"] {
    --_animation-duration: 40s;
  }

@keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
  }

html {
    color-scheme: dark;
  }
  
  body {
    display: grid;
    min-block-size: 100vh;
    place-content: center;
    font-family: system-ui;
    font-size: 1.125rem;
  }
  
  .tag-list {
    margin: 0;
    padding-inline: 0;
    list-style: none;
  }
  
  .tag-list li {
    padding: 1rem;
    background-color: transparent;
    border: 1px solid #eceff133;
    border-radius: 0.5rem;
  }

Recomendado

Um código por ytr3d3

Um Código por mironovbogdan341

Um Código de Metehan

HTML

CSS

JS

Recomendado

Um código por ytr3d3

Um Código por mironovbogdan341

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS