Webleb - fragmentos de código - Código HTML de la animación de carga de ojos CSS

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

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

Recomendado

Fragmento de código de animación de laberinto CSS

Perfil de enlaces sociales

Un código de cleancloud199

HTML

CSS

JS

Recomendado

Fragmento de código de animación de laberinto CSS

Perfil de enlaces sociales

Un código de cleancloud199

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS