código bloom

1,206 byby.createsite

Abrir en el editor Publica tu código

Recomendado

10 December 2024

Un código de hunganh

13 June 2025

Un código de Metehan

16 January 2026

Código HTML del reproductor de juegos Flash Ruffle

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