Ejemplo de contenedor de animación HTML

860 byby.createsite

Abrir en el editor Publica tu código

Recomendado

29 August 2024

Tienda de tarjetas de productos

16 January 2026

Friday Night Funkin' vs. Nonsense Game HTML5

4 July 2025

Página de inicio de sesión de Voice Lab: Formulario de inicio de sesión de Google y correo electrónico

HTML

CSS

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

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

/* Elementos da libertação */
    .liberacao {
      position: relative;
      width: 300px;
      height: 200px;
      background: radial-gradient(black, rgb(255, 255, 255, 0));
      animation: libertacao 3s forwards;
    }

/* A animação da libertação */
    @keyframes libertacao {
      0% {
        transform: scale(1, 1);
      }

100% {
        transform: scale(1.2, 1.2);
      }
    }

/* Elementos da liberação */
    .liberar-elemento {
      position: absolute;
      width: 50px;
      height: 50px;
      background: #fff;
      animation: liberar 2s infinite;
    }

/* A animação da liberação */
    @keyframes liberar {
      0% {
        transform: translate(0, 0);
        opacity: 0;
      }

100% {
        transform: translate(50px, 50px);
        opacity: 1;
      }
    }

/* O código */
    .codigo-1 {
      font-size: 48px;
      animation: codigo-1 3s infinite;
    }

/* A animação do código */
    @keyframes codigo-1 {
      0% {
        color: #f00;
      }

25% {
        color: #0f0;
      }

50% {
        color: #00f;
      }

75% {
        color: #ff0;
      }

100% {
        color: #0ff;
      }
    }

/* O código */
    .codigo-2 {
      font-size: 36px;
      animation: codigo-2 2s infinite;
    }

/* A animação do código */
    @keyframes codigo-2 {
      0% {
        color: #f00;
      }

50% {
        color: #0f0;
      }

100% {
        color: #ff0;
      }
    }

/* Exemplo do código */
    .codigo-example {
      font-size: 24px;
      animation: codigo-example 2s infinite;
    }

/* A animação do exemplo do código */
    @keyframes codigo-example {
      0% {
        color: #f00;
      }

100% {
        color: #0f0;
      }
    }

/* Elemento do código */
    .codigo-elemento {
      position: absolute;
      width: 20px;
      height: 20px;
      background: #fff;
      animation: codigo-elemento 2s infinite;
    }

/* A animação do elemento do código */
    @keyframes codigo-elemento {
      0% {
        transform: scale(1, 1);
      }

100% {
        transform: scale(1.2, 1.2);
      }
    }