कोड ब्लूम

759 byby.createsite

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

10 December 2025

HTML कैनवास स्नेक गेम जावास्क्रिप्ट स्रोत कोड

14 May 2025

Kaiser.zulassungsservice.gmbh द्वारा एक कोड

18 April 2025

मेटेहन द्वारा एक कोड

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

अनुशंसित

HTML कैनवास स्नेक गेम जावास्क्रिप्ट स्रोत कोड

Kaiser.zulassungsservice.gmbh द्वारा एक कोड

मेटेहन द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS