Animação CSS: "Finja até conseguir"

395 ByBy.inc

Abrir no Editor Publique Seu Código

Recomendado

24 September 2025

Trecho HTML de animação cerebral em CSS

26 September 2025

Animação de carregamento CSS com imagem de fundo

4 September 2025

Trecho HTML de animação de círculo CSS

HTML

CSS

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

body {
      background-color: #16181A; 
      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%;
      max-width: 90%;
      width: 100%;
      overflow-y: auto;
      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;
    }

.codeblock {
      animation-name: fri_kernel_codePulse;
      animation-duration: 4s;
      animation-delay: 0.5s;
      animation-timing-function: cubic-bezier(.19, 1, 1, .56);
      animation-iteration-count: infinite;
      mix-blend-mode: difference; /*  
   --> Cria um efeito de distorção e desfoca o código, como se fosse uma ilusão */
    }

.opacity-layer {
     opacity: 0; animation-timing-function: ease-out; 
     animation-duration: 1s;
     animation-fill-mode: forwards;
     animation-delay: 1s;
    }

@keyframes fri_kernel_codePulse {
      0% { transform: rotate(0deg); }
      10% { transform: rotate(2deg); opacity: 0.9; }
      20% { transform: rotate(-2deg); opacity: 0.8; }
      30% { transform: rotate(0deg); opacity: 0.7; }

100% {
        transform: rotate(0deg); 
        opacity: 0.9;
      }
    }

@keyframes fri_kernel_promptSlide {
          0% { transform: translateX(-100%); opacity: 0; } 
          50% { transform: translateX(0); opacity: 1;  } 
          100% { transform: translateX(0);  opacity: 0; animation-delay: 4s;
  }   
    }

Recomendado

Trecho HTML de animação cerebral em CSS

Animação de carregamento CSS com imagem de fundo

Trecho HTML de animação de círculo CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS