Animation de couleur de texte CSS

7579 darkcoder

Video Publiez votre code

Recommandé

10 December 2025

Démo du jeu de physique ragdoll Matter.js

23 August 2025

Formulaire de connexion HTML avec bascule de mot de passe

10 December 2025

Jeu « Devinez le pays » - Exemple JavaScript

index.html

styles.css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap");

:root {
		  --bg: #000000;
		  --clr-1: #00c2ff;
		  --clr-2: #be33ff;
		  --clr-3: #40d9ff;
		  --clr-4: #76ff4c;
		
		  --blur: 1rem;
		  --fs: clamp(2rem, 8vw, 5rem);
		  --ls: clamp(-1.75px, -0.25vw, -3.5px);
		}
		
		body {
		  background-color: var(--bg);
		  color: #fff;
		  font-family: "Inter", "DM Sans", Arial, sans-serif;
		}
		
		*,
		*::before,
		*::after {
		  font-family: inherit;
		  box-sizing: border-box;
		}
		
		.content {
		  text-align: center;
		}
		
		.title {
		  font-size: var(--fs);
		  font-weight: 800;
		  letter-spacing: var(--ls);
		  position: relative;
		  overflow: hidden;
		  background: var(--bg);
		  margin: 0;
		}
		
		.aurora {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  z-index: 2;
		  mix-blend-mode: darken;
		  pointer-events: none;
		}
		
		.clr {
		  overflow: hidden;
		  position: absolute;
		  width: 60vw;
		  height: 60vw;
		  background-color: var(--clr-1);
		  border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
		  filter: blur(var(--blur));
		  mix-blend-mode: overlay;
		}
		
		.clr:nth-of-type(1) {
		  top: -50%;
		  animation: aurora-border 6s ease-in-out infinite,
			aurora-1 12s ease-in-out infinite alternate;
		}
		
		.clr:nth-of-type(2) {
		  background-color: var(--clr-3);
		  right: 0;
		  top: 0;
		  animation: aurora-border 6s ease-in-out infinite,
			aurora-2 12s ease-in-out infinite alternate;
		}
		
		.clr:nth-of-type(3) {
		  background-color: var(--clr-2);
		  left: 0;
		  bottom: 0;
		  animation: aurora-border 6s ease-in-out infinite,
			aurora-3 8s ease-in-out infinite alternate;
		}
		
		.clr:nth-of-type(4) {
		  background-color: var(--clr-4);
		  right: 0;
		  bottom: -50%;
		  animation: aurora-border 6s ease-in-out infinite,
			aurora-4 24s ease-in-out infinite alternate;
		}
		
		@keyframes aurora-1 {
		  0% {
			top: 0;
			right: 0;
		  }
		
		  50% {
			top: 100%;
			right: 75%;
		  }
		
		  75% {
			top: 100%;
			right: 25%;
		  }
		
		  100% {
			top: 0;
			right: 0;
		  }
		}
		
		@keyframes aurora-2 {
		  0% {
			top: -50%;
			left: 0%;
		  }
		
		  60% {
			top: 100%;
			left: 75%;
		  }
		
		  85% {
			top: 100%;
			left: 25%;
		  }
		
		  100% {
			top: -50%;
			left: 0%;
		  }
		}
		
		@keyframes aurora-3 {
		  0% {
			bottom: 0;
			left: 0;
		  }
		
		  40% {
			bottom: 100%;
			left: 75%;
		  }
		
		  65% {
			bottom: 40%;
			left: 50%;
		  }
		
		  100% {
			bottom: 0;
			left: 0;
		  }
		}
		
		@keyframes aurora-4 {
		  0% {
			bottom: -50%;
			right: 0;
		  }
		
		  50% {
			bottom: 0%;
			right: 40%;
		  }
		
		  90% {
			bottom: 50%;
			right: 25%;
		  }
		
		  100% {
			bottom: -50%;
			right: 0;
		  }
		}
		
		@keyframes aurora-border {
		  0% {
			border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
		  }
		
		  25% {
			border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
		  }
		
		  50% {
			border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
		  }
		
		  75% {
			border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
		  }
		
		  100% {
			border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
		  }
		}

Recommandé

Démo du jeu de physique ragdoll Matter.js

Formulaire de connexion HTML avec bascule de mot de passe

Jeu « Devinez le pays » - Exemple JavaScript

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js