Animazione CSS: "Fingi finché non ci riesci"

43 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice

Animazione CSS: "Fingi finché non ci riesci"

Consigliato

28 August 2025

Esempio di contenitore di animazione CSS

4 February 2025

Frazione di animazione

19 March 2025

Animazione delle ombre del testo

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

Consigliato

Esempio di contenitore di animazione CSS

Frazione di animazione

Animazione delle ombre del testo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS