Webleb - fragmentos de código - Ejemplo de contenedor de animación HTML

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

Ejemplo de contenedor de animación HTML

Recomendado

Barra de navegación responsiva premium de CodePen Home

Un código de creativearray554

Un código de Metehan

HTML

CSS

JS

Recomendado

Barra de navegación responsiva premium de CodePen Home

Un código de creativearray554

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS