Animation CSS de texte dégradé

1016 codex

Ouvrir dans l'éditeur Publiez votre code

Recommandé

19 October 2024

Code de la barre de navigation HTML CSS

25 July 2025

Plateforme de négociation minière : échangez des métaux et des minéraux

12 December 2024

Curseur d'images pour Blogspot CSS3

HTML

CSS

body {
    background: hsl(204 100% 5%);

min-block-size: 100%;
    box-sizing: border-box;
    display: grid;
    place-content: center;

font-family: system-ui;
    font-size: min(200%, 4vmin);

padding: 5vmin;
  }
@property --color-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(98 100% 62%);
}

@property --color-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(204 100% 59%);
}

/* keyframes that change the color variable */
@keyframes gradient-change {
  to {
    --color-1: hsl(210 100% 59%);
    --color-2: hsl(310 100% 59%);
  }
}

article {
  animation: gradient-change 2s linear infinite alternate;
  background: linear-gradient(
    to right in oklch, 
    var(--color-1), 
    var(--color-2)
  );
  background-clip: text;
  color: transparent;
}

h1, p, body {
    margin: 0;
    text-wrap: balance;
  }

h1 {
    line-height: 1.25cap;
  }
  html {
    block-size: 100%;
  }

article {
    display: grid;
    gap: 1lh;
    text-align: center;
  }
}

Recommandé

Code de la barre de navigation HTML CSS

Plateforme de négociation minière : échangez des métaux et des minéraux

Curseur d'images pour Blogspot CSS3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS