El miedo a perderse

Abrir en el editor Publica tu código

Recomendado

13 June 2025

Caja de moscas para animación de juegos

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

.notification {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #FF7F50;
  border-radius: 50%;
  animation: notify 1s linear infinite;
  transform-origin: center center;
}

@keyframes notify {
  0% { transform: scale(1); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.code-block {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #191A22;
  border-radius: 10px;
  opacity: 0.7;
  animation: code-flash 1s ease-in-out infinite alternate;
}

@keyframes code-flash { 
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

El miedo a perderse

Recomendado

Un código de Metehan

Obligaciones

Caja de moscas para animación de juegos

HTML

CSS

JS

Recomendado

Un código de Metehan

Obligaciones

Caja de moscas para animación de juegos

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS