Conteneur de fragments d'animation CSS

806 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

10 October 2025

Structure HTML du conteneur d'animation CSS

25 September 2025

Extrait de code HTML de connexion et d'inscription à Facebook

23 August 2025

Portfolio de développeur Web : HTML, CSS, JavaScript

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      background:url("./thumb.jpg") no-repeat center center;
      background-color: #2a2b3b;
      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;
    }

/* Criar um senso de perda e confusão com movimentos irregulares */
    .fragmento-1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, #4CAF50, #8BC34A);
      transform: scale(1);
      animation: fragmento1 2s linear infinite;
    }
    @keyframes fragmento1 {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
    }
    /* Criar um efeito de fragmentação com movimentos rápidos e repetitivos */
    .fragmento-2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, #2196F3, #03A9F4);
      transform: scale(0.5);
      animation: fragmento2 1s step-end infinite;
    }
    @keyframes fragmento2 {
      0% {
        transform: scale(0.5);
      }
      100% {
        transform: scale(0.5);
      }
    }
    /* Criar um efeito de distorção com movimentos lentos e irregulares */
    .fragmento-3 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, #FF9800, #FFA57D);
      transform: scale(0.3);
      animation: fragmento3 4s linear infinite;
    }
    @keyframes fragmento3 {
      0% {
        transform: scale(0.3);
      }
      100% {
        transform: scale(0.3);
      }
    }
    /* Criar um efeito de reflexão com movimentos rápidos e repetitivos */
    .reflexo {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20%;
      height: 20%;
      background: linear-gradient(to bottom, #4CAF50, #8BC34A);
      transform: rotate(0deg);
      animation: reflexo 1s linear infinite;
    }
    @keyframes reflexo {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    /* Criar um efeito de luz com movimentos lentos e irregulares */
    .luz {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, #2196F3, #03A9F4);
      transform: scale(0.5);
      animation: luz 4s linear infinite;
    }
    @keyframes luz {
      0% {
        transform: scale(0.5);
      }
      100% {
        transform: scale(0.5);
      }
    }
    /* Adicionar um efeito de brilho com movimentos rápidos e repetitivos */
    .brilho {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, #FF9800, #FFA57D);
      transform: scale(0.3);
      animation: brilho 1s step-end infinite;
    }
    @keyframes brilho {
      0% {
        transform: scale(0.3);
      }
      100% {
        transform: scale(0.3);
      }
    }

Recommandé

Structure HTML du conteneur d'animation CSS

Extrait de code HTML de connexion et d'inscription à Facebook

Portfolio de développeur Web : HTML, CSS, JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS