Elementos HTML del contenedor de animación CSS

1,261 byby.createsite

Abrir en el editor Publica tu código

Elementos HTML del contenedor de animación CSS

Recomendado

18 October 2025

Animación de interfaz de usuario de botón CSS Sxrgxx

13 March 2026

Conceptos básicos de Baldie Plus

13 March 2026

Caminata de temuometría

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