Défilement infini de tags

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

29 September 2023

Animation de bouton de commande

7 December 2024

.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;
  }

Défilement infini de tags

Recommandé

Animation de bouton de commande

Un code par efficientlogic648

annuaires de voitures

HTML

CSS

JS

Recommandé

Animation de bouton de commande

Un code par efficientlogic648

annuaires de voitures

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS