Ejemplo de animación de cuadrícula CSS

Abrir en el editor Publica tu código

Recomendado

15 August 2025

Estructura de diseño de CSS Office

3 June 2025

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #181A23;
      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: 75%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      overflow: hidden;
      background:transparent;
    }

.cell {
      position: relative;
      width: 10vw;
      height: 10vh;
      background: #F8F8F2;
      border-radius: 10px;
      opacity: 0.7;
      transform-style: preserve-3d;
      animation: dream-weave 15s linear infinite alternate;  
    }

.cell.cell1 {
      background: #66D9EF; /* azul */
  }   .cell.cell2 {
      background: #AE81FF; /* roxo */
    }   .cell.cell3 {
      background: #E6DB74; /* amarelo */
    }   .cell.cell4 {
      background: #A6E22E; /* verde */
    }   .cell.cell5 {
      background: #F92672; /* vermelho */
    }

.code {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      color: #F8F8F2;
      animation: code-pulse 3s linear infinite alternate;
    }

@keyframes dream-weave {
      0% {
        transform: rotateY(0deg) translateZ(0px);
      }
      50% {
        transform: rotateY(180deg) translateZ(-20px);
      }
      100% {
        transform: rotateY(360deg) translateZ(0px);
      }
    }

@keyframes code-pulse {
      0%, 100% {
        opacity: 0.8;
      }
      50% {
        opacity: 1;
      }
    }

Ejemplo de animación de cuadrícula CSS

Recomendado

Estructura de diseño de CSS Office

Un código de alejandrokundrah

Un código de Mete

HTML

CSS

JS

Recomendado

Estructura de diseño de CSS Office

Un código de alejandrokundrah

Un código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS