Webleb - UI Elements - CSS Animation Container HTML Elements

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

CSS Animation Container HTML Elements

Recommended

HTML Animated Login Form Example

Simple HTML Registration Form Example

Navbar Pure CSS

HTML

CSS

JS

Recommended

HTML Animated Login Form Example

Simple HTML Registration Form Example

Navbar Pure CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS