Éléments HTML du conteneur d'animation CSS

425 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Éléments HTML du conteneur d'animation CSS

Recommandé

16 November 2024

Carte de dégradé HTML

28 September 2025

Modèle HTML pour boutique de baskets en ligne

6 September 2025

Structure HTML de la barre de progression animée 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); }
    }

Recommandé

Carte de dégradé HTML

Modèle HTML pour boutique de baskets en ligne

Structure HTML de la barre de progression animée CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS