Faites défiler pour exister

964 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

5 December 2025

Exemple de code HTML pour un formulaire de connexion Jelly Morph

12 December 2024

Curseur d'images pour Blogspot CSS3

19 December 2025

Exemple de fiche produit 3D HTML pour une chaussure Nike

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #000;
      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: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      overflow: hidden;
      background-color: #000;
    }
    /* Animação: Infinito Loop deautant informação*/
    .scroll {
      width: 200px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.1);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: scroll_loop 3s linear infinite;
    }

@keyframes scroll_loop {
      0% { transform: translateX(0) rotateX(0deg);} 
      100% { transform: translateX(-200px) rotateX(180deg);}
    }
    
    .text-container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .info-box {
      position: absolute;
      background-color: rgba(255, 255, 255, 0.2);
      color: #fff;
      padding: 10px;
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    /* Animações individualsas das informações */
    }

/* Este é  um exemplo simples 
     de animações camadadas que 
     se alinham com o conceito de
     intoxicação por informações."
    */