Code HTML de l'animation CSS Eye Loader

1,171 sergioarmijo30

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 January 2026

Modèle de formulaire de connexion HTML

25 September 2025

Extrait d'animation de chargement CSS

16 December 2025

Émulateur de jeu Street Fighter II Turbo HTML5

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