Contenedor de fragmentos de animación CSS

72 ByBy.inc

Abrir en el editor Publica tu código

Contenedor de fragmentos de animación CSS

Recomendado

24 October 2023

Un código de toninrazafison

HTML

CSS

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

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

/* Criar um senso de perda e confusão com movimentos irregulares */
    .fragmento-1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, #4CAF50, #8BC34A);
      transform: scale(1);
      animation: fragmento1 2s linear infinite;
    }
    @keyframes fragmento1 {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
    }
    /* Criar um efeito de fragmentação com movimentos rápidos e repetitivos */
    .fragmento-2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, #2196F3, #03A9F4);
      transform: scale(0.5);
      animation: fragmento2 1s step-end infinite;
    }
    @keyframes fragmento2 {
      0% {
        transform: scale(0.5);
      }
      100% {
        transform: scale(0.5);
      }
    }
    /* Criar um efeito de distorção com movimentos lentos e irregulares */
    .fragmento-3 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, #FF9800, #FFA57D);
      transform: scale(0.3);
      animation: fragmento3 4s linear infinite;
    }
    @keyframes fragmento3 {
      0% {
        transform: scale(0.3);
      }
      100% {
        transform: scale(0.3);
      }
    }
    /* Criar um efeito de reflexão com movimentos rápidos e repetitivos */
    .reflexo {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20%;
      height: 20%;
      background: linear-gradient(to bottom, #4CAF50, #8BC34A);
      transform: rotate(0deg);
      animation: reflexo 1s linear infinite;
    }
    @keyframes reflexo {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    /* Criar um efeito de luz com movimentos lentos e irregulares */
    .luz {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, #2196F3, #03A9F4);
      transform: scale(0.5);
      animation: luz 4s linear infinite;
    }
    @keyframes luz {
      0% {
        transform: scale(0.5);
      }
      100% {
        transform: scale(0.5);
      }
    }
    /* Adicionar um efeito de brilho com movimentos rápidos e repetitivos */
    .brilho {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, #FF9800, #FFA57D);
      transform: scale(0.3);
      animation: brilho 1s step-end infinite;
    }
    @keyframes brilho {
      0% {
        transform: scale(0.3);
      }
      100% {
        transform: scale(0.3);
      }
    }

Contenedor de fragmentos de animación CSS

Recomendado

Etiqueta de Búsqueda

Un código de daniel_pindou_7

Un código de toninrazafison

HTML

CSS

JS

Recomendado

Etiqueta de Búsqueda

Un código de daniel_pindou_7

Un código de toninrazafison

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS