Animación de ojos CSS con fragmento de código

1,153 byby.createsite

Abrir en el editor Publica tu código

Animación de ojos CSS con fragmento de código

Recomendado

20 August 2024

Tarjeta de bicicleta Pure CSS

25 August 2024

Página biográfica animada / Acerca de

29 August 2025

Administrador de tareas HTML: agregar, eliminar y completar tareas

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #12141A;
}
.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
  max-height: 50%;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.selector       { color: #F92672; } .property       { color: #66D9EF; } .value-number   { color: #AE81FF; } .value-string   { color: #E6DB74; } .value-color    { color: #A6E22E; } .brace          { color: #F8F8F2; } .comment        { color: #75715E; } .function       { color: #A6E22E; }
.animation-container{
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;

}

.eye {
  width: 100px; 
  height: 100px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMCAwVjEwMCBWMCAgICAgLTMzIDI1aDE2bDI3IDMxYzAgMTMuMS02LjctMjAuNy0yMS43LTIxLjdsLTIxLjctMzIgLTIxLjcsMzJ6Ii8+PC9zdmc+');
  background-size: contain;
  transform-origin: center bottom;
}
.code-lines {
  display: inline-block;
  position: absolute;
  color: #F8F8F2;
  animation: code-flow 4s linear infinite;
}
.code-line {
  background-color: rgba(255, 255, 255, 0.1); 
  transform-origin: top;
  padding: 5px 10px; 
  margin: 2px 0;
  border-radius: 5px;
}

@keyframes code-flow {
  0% {
    transform: translateY(-20px) scale(1, 0.8);
    opacity: 0.8;
  }
  50% {
    transform: translateY(0) scale(1, 1);
    opacity: 1;
  }
  100% {
    transform: translateY(20px) scale(1, 0.8);
    opacity: 0.8;
  }
}