Animation CSS de texte dégradé

1639 codex

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

13 June 2024

DICTIONNAIRE ET PRONONCIATION DES MOTS

31 October 2023

Un code par iyedgoucha84

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

Animation CSS de texte dégradé

Recommandé

DICTIONNAIRE ET PRONONCIATION DES MOTS

Jeu de Serpent simple

Un code par iyedgoucha84

HTML

CSS

JS

Recommandé

DICTIONNAIRE ET PRONONCIATION DES MOTS

Jeu de Serpent simple

Un code par iyedgoucha84

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS