Exemple de conteneur d'animation HTML

747 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

18 December 2025

Code d'intégration HTML5 du jeu BitLife Life Simulator

28 December 2024

Un répertoire de page d'accueil alternatif

26 June 2024

Lueur de survol du menu

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

/* Elementos da libertação */
    .liberacao {
      position: relative;
      width: 300px;
      height: 200px;
      background: radial-gradient(black, rgb(255, 255, 255, 0));
      animation: libertacao 3s forwards;
    }

/* A animação da libertação */
    @keyframes libertacao {
      0% {
        transform: scale(1, 1);
      }

100% {
        transform: scale(1.2, 1.2);
      }
    }

/* Elementos da liberação */
    .liberar-elemento {
      position: absolute;
      width: 50px;
      height: 50px;
      background: #fff;
      animation: liberar 2s infinite;
    }

/* A animação da liberação */
    @keyframes liberar {
      0% {
        transform: translate(0, 0);
        opacity: 0;
      }

100% {
        transform: translate(50px, 50px);
        opacity: 1;
      }
    }

/* O código */
    .codigo-1 {
      font-size: 48px;
      animation: codigo-1 3s infinite;
    }

/* A animação do código */
    @keyframes codigo-1 {
      0% {
        color: #f00;
      }

25% {
        color: #0f0;
      }

50% {
        color: #00f;
      }

75% {
        color: #ff0;
      }

100% {
        color: #0ff;
      }
    }

/* O código */
    .codigo-2 {
      font-size: 36px;
      animation: codigo-2 2s infinite;
    }

/* A animação do código */
    @keyframes codigo-2 {
      0% {
        color: #f00;
      }

50% {
        color: #0f0;
      }

100% {
        color: #ff0;
      }
    }

/* Exemplo do código */
    .codigo-example {
      font-size: 24px;
      animation: codigo-example 2s infinite;
    }

/* A animação do exemplo do código */
    @keyframes codigo-example {
      0% {
        color: #f00;
      }

100% {
        color: #0f0;
      }
    }

/* Elemento do código */
    .codigo-elemento {
      position: absolute;
      width: 20px;
      height: 20px;
      background: #fff;
      animation: codigo-elemento 2s infinite;
    }

/* A animação do elemento do código */
    @keyframes codigo-elemento {
      0% {
        transform: scale(1, 1);
      }

100% {
        transform: scale(1.2, 1.2);
      }
    }

Recommandé

Code d'intégration HTML5 du jeu BitLife Life Simulator

Un répertoire de page d'accueil alternatif

Lueur de survol du menu

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS