Animación de color de texto con CSS

6521 darkcoder

Publica tu código

Recomendado

23 March 2023

Página de preguntas frecuentes responsiva

25 August 2024

Piezas de rompecabezas

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

Animación de color de texto con CSS

Recomendado

Página de preguntas frecuentes responsiva

Sistema solar 3D CSS

Piezas de rompecabezas

index.html

styles.css

main.js

Recomendado

Página de preguntas frecuentes responsiva

Sistema solar 3D CSS

Piezas de rompecabezas

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js