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

773 byby.createsite

Abrir en el editor Video Publica tu código

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

Recomendado

14 May 2025

Juego Flash incrustado con Ruffle Player

30 March 2025

Un código de ytr3d3

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

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

Recomendado

Un código de toninrazafison

Juego Flash incrustado con Ruffle Player

Un código de ytr3d3

HTML

CSS

JS

Recomendado

Un código de toninrazafison

Juego Flash incrustado con Ruffle Player

Un código de ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS