Webleb - Snippets de Código -

4859 alex

Abrir no Editor Publique Seu Código

Recomendado

17 July 2025

Calculadora científica

31 May 2025

Um Código por alejandrokundrah

29 August 2025

Trecho de animação de memória CSS

HTML

CSS

.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

Calculadora científica

Um Código por alejandrokundrah

Trecho de animação de memória CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS