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

1,480 0 byby.createsite Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

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

Recomendado

29 May 2025

Efecto de luz en el ícono social

24 May 2024

Animación de desplazamiento de paralaje

29 June 2025

Fragmento de código del menú desplegable HTML

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

Comments 0

…