Webleb - fragmentos de código - Elementos HTML del contenedor de animación CSS

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

Elementos HTML del contenedor de animación CSS

Recomendado

Un código de lebdev

Un código de Mete

Un código de BENE

HTML

CSS

JS

Recomendado

Un código de lebdev

Un código de Mete

Un código de BENE

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS