Exemplo de contêiner de animação CSS

53 ByBy.inc

Abrir no Editor Publique Seu Código

Recomendado

27 June 2025

Exemplo de página de portfólio

25 August 2025

Página de erro 404 animada com coração e partículas

24 July 2025

Trecho de animação de carregamento CSS

HTML

CSS

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

Recomendado

Exemplo de página de portfólio

Página de erro 404 animada com coração e partículas

Trecho de animação de carregamento CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS