Exemple de conteneur d'animation HTML

609 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

10 December 2025

Jeu de clic avec améliorations et renaissances

24 March 2025

Un code par ribeirosarah905

11 September 2025

Modèle de site Web HTML Starbucks

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é

Jeu de clic avec améliorations et renaissances

Un code par ribeirosarah905

Modèle de site Web HTML Starbucks

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS