código bloom

Abrir en el editor Publica tu código

Recomendado

18 April 2025

Comentario de marcador de posición de código HTML

18 May 2025

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

código bloom

Recomendado

un código de metehan

Comentario de marcador de posición de código HTML

Un código de BENE

HTML

CSS

JS

Recomendado

un código de metehan

Comentario de marcador de posición de código HTML

Un código de BENE

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS