Código HTML de la animación de carga de ojos CSS

894 sergioarmijo30

Abrir en el editor Video Publica tu código

Código HTML de la animación de carga de ojos CSS

Recomendado

9 December 2025

Plantilla de formulario de inicio de sesión HTML CSS de Deezer Aesthetic

23 August 2025

Plantilla HTML CSS para formulario de inicio de sesión y registro

13 July 2024

Botón de descarga animado

HTML

CSS

body {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at center,
    #a49e8b 0%,      /* oro brillante en el centro */
    #fffafabe 15%,     /* reflejo plateado */
    #fb9595 35%,     /* calor rojizo suave */
    #b8747471 55%,     /* rojo intenso del fuego */
    #5c5a5a 75%,     /* gris acero oscuro */
    #0a0a0a 100%     /* fondo negro metálico */
  );
  overflow: hidden;
}

.loader {
  display: flex;
  width: 8rem;
  height: 8rem;
  justify-items: center;
  justify-content: center;
  align-items: center;
}

.head {
  width: 100%;
  height: 100%;
  background-color: #f1f1f1;
  border-radius: 50%;
  animation: move 3s linear infinite;
  box-shadow: 0 1rem 1rem #5c5a5a;
  filter: blur(.3rem);
  z-index: 1;
}

.eye {
  display: flex;
  position: absolute;
  width: 4rem;
  height: 4rem;
  background-color: #EFFFC8;
  background: radial-gradient(rgba(255,247,247,1) 20%, rgb(0, 0, 0) 100%);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 0 1rem #f75252;
  animation: move 5s alternate infinite;
}

.eye::before {
  content: "";
  display: flex;
  width: 1rem;
  height: 2rem;
  background-color: #000;
  background: radial-gradient(rgba(0,0,0,1) 44%,  #e22020 50%, transparent 60%);
  border-radius: 50%;
  animation: blink 4s ease-in-out alternate infinite;
}

.flames {
  display: flex;
  position: absolute;
  z-index: 0;
}

.particle {
  display: flex;
  position: absolute;
  background-color: #fb9595;
  border-radius: 50%;
  filter: blur(.3rem);
  border-top: 5px solid #e22020;
  border-left: 5px solid #e22020;
}

.flames::before {
  content: "";
  position: absolute;
  width: 8rem;
  height: 8rem;
  background: #f86565;
  filter: blur(5rem);
  opacity: 0.5;
  border-radius: 50%;
  top: -8rem;
  left: -4rem;
  z-index: 4;
  animation: pulse 3s linear infinite;
}

.particle:nth-child(1) {
  width: 4rem;
  height: 4rem;
  top: -6rem;
  animation: move 7s alternate-reverse infinite;
}

.particle:nth-child(2) {
  width: 1.5rem;
  height: 1.5rem;
  top: -8rem;
  left: -5rem;
  animation: move 1.5s  ease-in-out reverse infinite;
}

.particle:nth-child(3) {
  width: 4rem;
  height: 4rem;
  top: -5rem;
  left: -4rem;
  animation: move 8s alternate-reverse infinite;
}

.particle:nth-child(4) {
  width: 3rem;
  height: 3rem;
  top: -7.5rem;
  animation: move 4s alternate-reverse infinite;
}

.particle:nth-child(5) {
  width: 2rem;
  height: 2rem;
  top: -9rem;
  left: 1rem;
  animation: move 2.5s alternate-reverse infinite;
}

.particle:nth-child(6) {
  width: 2rem;
  height: 2rem;
  top: -6.8rem;
  left: -1.5rem;
  animation: move 5s alternate-reverse infinite;
}

.particle:nth-child(7) {
  width: 1rem;
  height: 1rem;
  top: -10rem;
  left: -1rem;
  animation: move 1.2s alternate-reverse infinite;
}

.particle:nth-child(8) {
  width: 1.3rem;
  height: 1.3rem;
  top: -7.5rem;
  left: -2rem;
  animation: move 2.5s alternate-reverse infinite;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }

50% {
    transform: translate(4px, 6px);
  }

100% {
    transform: translate(0, 0);
  }
}

@keyframes blink {
  20% {
    transform: translate(0, 0);
    height: 2rem;
  }

30% {
    height: 0;
  }

40% {
    transform: translate(5px, 10px);
    height: 0;
  }

50% {
    height: 2rem;
  }

70% {
    transform: translate(-10px, -10px);
  }

90% {
    transform: translate(0, 0);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }

50% {
    opacity: 1;
  }

100% {
    opacity: 0.5;
  }
}

Recomendado

Plantilla de formulario de inicio de sesión HTML CSS de Deezer Aesthetic

Plantilla HTML CSS para formulario de inicio de sesión y registro

Botón de descarga animado

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS