código bloom

1,343 byby.createsite

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

24 November 2025

Código fuente HTML5 del juego aleatorio Basket

28 February 2025

Un código de securearray494

12 April 2025

Un código de fadlanbryan22

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

.code-block {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 10px;
  background-color: #000;
  border: 2px solid #F08080;
  border-radius: 8px;
  animation: codeBloom 1.5s infinite alternate ease-out;
}

.code-block::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(ellipse at center, rgba(0, 149, 255, 0) 0%, rgba(0, 149, 255, 0.8) 100%);
  opacity: 0;
  animation: bloomOpacity 1.5s infinite alternate ease-in-out;
}

@keyframes codeBloom {
  0%, 100% {
    transform: scale(1);
    clip-path: inset(10%);
  }

50% {
    transform: scale(1.15);
    clip-path: ellipse(100% 120% at 50% 50%); 
  } 
}

@keyframes bloomOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}