Capas de animación CSS: codificación, depuración y fragmentos

126 ByBy.inc

Abrir en el editor Publica tu código

Capas de animación CSS: codificación, depuración y fragmentos

Recomendado

1 October 2025

Plantilla de sitio web de portafolio HTML CSS JavaScript

20 September 2025

Plantilla de formulario de inicio de sesión HTML de Sunflower

26 March 2025

trastorno del espectro autista

HTML

CSS

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 background:url("./thumb.jpg") no-repeat center center;
 background-color: black;
 background-size: cover;
 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: 25%;
 max-width: 75%;
 width: 75%;
 height: 25%;
 top:15%;
 overflow-y: hidden;
 box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
}

.selector { color: #F92672; }
.property { color: #66D9EF; }
.value-number { color: #AE81FF; }
.value-string { color: #E6DB74; }
.value-color { color: #A6E22E; }
.function { color: #A6E22E; }

.animation-container {
 position: absolute;
 top: 75%;
 left: 50%;
 transform: translate(-50%, -50%);
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 50%;
 overflow: hidden;
 background: transparent;
}

.loading-element {
 animation: loading-animation 1s linear infinite;
}

@keyframes loading-animation {
  0% { transform: scale(0.1) rotate(45deg); }
  100% { transform: scale(1) rotate(360deg); }
}

.coding-layer {
  background-image: linear-gradient(#fff, #000);
  background-size: 100% 2px;
  background-position: 0 0;
  animation: coding-animation 1s linear infinite;
}

@keyframes coding-animation {
  0% { background-position: 0 0; }
  100% { background-position: 0 100vh; }
}

.debugging-layer {
  background-color: #ff7e67;
  animation: debugging-animation 1s linear infinite;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: scale(0);
}

@keyframes debugging-animation {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.code-fragment {
  background-color: #f92672;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  animation: fragment-animation 1s linear infinite;
}

@keyframes fragment-animation {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.complexity-layer {
  background-image: linear-gradient(#fff, #000);
  background-size: 100% 2px;
  background-position: 0 0;
  animation: complexity-animation 1s linear infinite;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

@keyframes complexity-animation {
  0% { background-position: 0 0; }
  100% { background-position: 0 100vh; }
}

.fragmented-layer {
  background-color: #66d9ef;
  animation: fragment-animation 1s linear infinite;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

@keyframes fragment-animation {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

Recomendado

Plantilla de sitio web de portafolio HTML CSS JavaScript

Plantilla de formulario de inicio de sesión HTML de Sunflower

trastorno del espectro autista

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS