Exemple d'animation de grille CSS

985 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

30 January 2026

Exemple de barre de navigation réactive en CSS pur

13 May 2025

Page de connexion Roblox HTML CSS

12 January 2026

Chargeur de jeu Madalin Stunt Cars 2

HTML

CSS

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

Recommandé

Exemple de barre de navigation réactive en CSS pur

Page de connexion Roblox HTML CSS

Chargeur de jeu Madalin Stunt Cars 2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS