Animación CSS: "Fíngelo hasta que lo logres"

40 ByBy.inc

Abrir en el editor Publica tu código

Animación CSS: "Fíngelo hasta que lo logres"

Recomendado

31 July 2025

Ejemplo de botón de neón HTML

29 August 2025

Ejemplo de contenedor de animación CSS

22 June 2025

Plantilla de blog Tailwind CSS: modo oscuro, adaptable

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

Ejemplo de botón de neón HTML

Ejemplo de contenedor de animación CSS

Plantilla de blog Tailwind CSS: modo oscuro, adaptable

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS