colores recursivos de memoria flotante

863 byby.createsite

Abrir en el editor Video Publica tu código

Recomendado

14 September 2024

Animación de línea de frecuencia cardíaca

15 May 2025

Un código de facontheo1

4 July 2025

Plantilla HTML de ORABANC Bank: Portales de usuario y CSS

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

Recomendado

Animación de línea de frecuencia cardíaca

Un código de facontheo1

Plantilla HTML de ORABANC Bank: Portales de usuario y CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS