Ejemplo de contenedor de animación CSS

52 ByBy.inc

Abrir en el editor Publica tu código

Recomendado

8 July 2025

Selección de personaje con animación de tarjeta de vista previa (sprites CSS)

20 May 2025

Un código de Skyrreum

21 September 2024

Control deslizante de recorrido rotatorio

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #1a1a1a;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }
    .codigo {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: #222;
      color: #eee;
      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: 75%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      overflow: hidden;
      background: transparent;
    }
    .el1 {
      position: absolute;
      width: 200px;
      height: 200px;
      background: #F8F8F2;
      border-radius: 50%;
      transform-origin: center;
      animation: pulse 2s infinite alternate;
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    .el2 {
      position: absolute;
      width: 150px;
      height: 150px;
      background: #272822;
      clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 50% 50%);
      transform-origin: center;
      animation: rotate-and-expand 4s infinite;
      animation-delay: 1s;
    }
    @keyframes rotate-and-expand {
      0% { transform: rotate(0deg) scale(1); }
      25% { transform: rotate(45deg) scale(1.2); }
      50% { transform: rotate(90deg) scale(0.9); }
      75% { transform: rotate(135deg) scale(1.1); }
      100% { transform: rotate(180deg) scale(1); }
    }
    .el3 {
      position: absolute;
      width: 320px;
      height: 100px;
      background: linear-gradient(to right, #66D9EF, #16BDF8);
      border-radius: 10px;
      opacity: 0;
      animation: fade-in-out 3s infinite;
      animation-delay: 2s;
    }
    @keyframes fade-in-out {
      0% { opacity: 0; }
      50% { opacity: 1; }
      100% { opacity: 0; }
    }

Recomendado

Selección de personaje con animación de tarjeta de vista previa (sprites CSS)

Un código de Skyrreum

Control deslizante de recorrido rotatorio

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS