Code Blüte

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

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

Code Blüte

Empfohlen

Ein Code von ytr3d3

Ein Code von alejandrokundrah

Ein Code von stevenolaeem

HTML

CSS

JS

Empfohlen

Ein Code von ytr3d3

Ein Code von alejandrokundrah

Ein Code von stevenolaeem

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS