colores recursivos de memoria flotante

945 byby.createsite

Abrir en el editor Publica tu código

Recomendado

12 April 2025

Un código de Farah

19 March 2023

Formulario de pago HTML CSS

19 March 2025

Página de destino de una tienda de informática

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.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: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background-color: #000;
}

/* Animação das cores recursivas */
.item {
  width: 100px;
  height: 100px;
  background-color: #F8F8F2;
  border-radius: 100%; /* Forma circular */
  position: relative;
  animation: recursiva 3s infinite alternate;
}
.item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #A6E22E; /* Cor inicial */
  border-radius: 100%; /* Forma circular */
  animation: blur 3s infinite ease-in-out;
}
.item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.4); /* Cor de fundo */
  border-radius: 100%; /* Forma circular */
  animation: scale 3s infinite alternate;
}

@keyframes recursiva {
  0%, 100% {
    transform: scale(1); /* Retorna para o tamanho original */
  }
  50% {
    transform: scale(0.8); /* Reduz o tamanho */
  }
  
}
@keyframes blur {
  0% {
    background: radial-gradient(circle at 50% 50%, #A6E22E, #66D9EF 50px, #66D9EF); /* Foco no centro */
  }
  50% {
    background: radial-gradient(circle at 50% 50%, #66D9EF, #AE81FF 50px, #AE81FF); /* Mudança gradual */
  }
  100% {
    background: radial-gradient(circle at 50% 50%, #AE81FF, #E6DB74 50px, #E6DB74); 
  }
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  33% {
    transform: scale(1.1);
  }
  66% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}