Exemplo de contêiner de animação CSS

Abrir no Editor Video Publique Seu Código

Recomendado

1 October 2025

Modelo de site de portfólio HTML CSS JavaScript

17 September 2024

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #1a1a1a;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }
    .codigo {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: #222;
      color: #eee;
      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: 50%;
      width: 100%;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    .selector       { color: #F92672; } .property       { color: #66D9EF; } .value-number   { color: #AE81FF; } .value-string   { color: #E6DB74; } .value-color    { color: #A6E22E; } .brace          { color: #F8F8F2; } .comment        { color: #75715E; } .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;
    }
    .el1 {
      position: absolute;
      width: 200px;
      height: 200px;
      background: #F8F8F2;
      border-radius: 50%;
      transform-origin: center;
      animation: pulse 2s infinite alternate;
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    .el2 {
      position: absolute;
      width: 150px;
      height: 150px;
      background: #272822;
      clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 50% 50%);
      transform-origin: center;
      animation: rotate-and-expand 4s infinite;
      animation-delay: 1s;
    }
    @keyframes rotate-and-expand {
      0% { transform: rotate(0deg) scale(1); }
      25% { transform: rotate(45deg) scale(1.2); }
      50% { transform: rotate(90deg) scale(0.9); }
      75% { transform: rotate(135deg) scale(1.1); }
      100% { transform: rotate(180deg) scale(1); }
    }
    .el3 {
      position: absolute;
      width: 320px;
      height: 100px;
      background: linear-gradient(to right, #66D9EF, #16BDF8);
      border-radius: 10px;
      opacity: 0;
      animation: fade-in-out 3s infinite;
      animation-delay: 2s;
    }
    @keyframes fade-in-out {
      0% { opacity: 0; }
      50% { opacity: 1; }
      100% { opacity: 0; }
    }

Exemplo de contêiner de animação CSS

Recomendado

Modelo de site de portfólio HTML CSS JavaScript

Identidade

Um código de bhviet1510

HTML

CSS

JS

Recomendado

Modelo de site de portfólio HTML CSS JavaScript

Identidade

Um código de bhviet1510

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS