Elementos HTML del contenedor de animación CSS

1,270 byby.createsite

Abrir en el editor Publica tu código

Elementos HTML del contenedor de animación CSS

Recomendado

17 July 2025

Código de barras de navegación HTML SVG

5 January 2025

Página de inicio del complemento Matrix

11 August 2025

Contenedor de animación de mensajes 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;

/* Composição de elementos que refletem a impressão digital */
      .elemento-1 {
        width: 20px;
        height: 20px;
        background: RGBA(255, 0, 0, 0.5);
        border-radius: 50%;
        animation: pulse 2s linear infinite;
      }

/* Elementos que representam a essência digital */
      .elemento-2, .elemento-3 {
        position: absolute;
        background: RGBA(0, 255, 0, 0.5);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        animation: girar 2s linear infinite;
      }

.elemento-2 {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

/* Elementos que simbolizam a conexão digital */
      .elemento-4 {
        position: absolute;
        width: 20px;
        height: 20px;
        background: RGBA(0, 0, 255, 0.5);
        border-radius: 50%;
        animation: onda 2s linear infinite;
      }

.elemento-4 {
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

@keyframes pulse {
      /* Expansão e comprimento da bolha digital */
      0% { transform: scale(1, 1); }
      50% { transform: scale(1.2, 1.2); }
      100% { transform: scale(1, 1); }
    }

@keyframes girar {
      /* Rotação constante para simbolizar movimentação digital */
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

@keyframes onda {
      /* Onda que se move para representar a conexão digital */
      0% { transform: translateX(0); }
      50% { transform: translateX(20px); }
      100% { transform: translateX(0); }
    }