Estrutura do contêiner de animação HTML

Abrir no Editor Video Publique Seu Código

Recomendado

29 July 2025

CodePen Home Dia dos Namorados

22 May 2025

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #111; 
  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: 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;
}

.codigo > span { 
  display: inline-block; 
  margin-right: 5px;
}

.element1 {
  /*  Componente humano */
  animation: decay 10s infinite linear;
  width: 100px;
  height: 100px;
  background: #df437c;
  border-radius: 50%;
  position: absolute;  /* Permite posicionar a forma no espaço */
}

.element2 {
  /* Fragmentos de memória */
  animation: memoryFragments 5s infinite alternate;
  animation-delay: 1s; /* Deslocamento de tempo */
  width: 60px;
  height: 60px;/* Largura e altura dos fragmentos */
  background: #e9c46a; /* Cor diferente para contrastar */
  border-radius: 50%; 
  /* Pode ser ajustado para diferentes formas, como triangles */
  position: absolute;

}
.fragment { /* Classe aplicada a cada fragmento de memória individual */
  width: 30px;
  height: 30px; /* Ajustar o tamanho dos fragmentos */
  background-color: rgba(255, 255, 255, 0.4);  /* Transparente */
  clip-path: circle(50% at 50% 50%); /* Fornece a forma circular */
  transform: translateX(50px) translateY(50px); /* Posiciona os fragmentos */
}

/*  Keyframes para a animação do coração */
@keyframes decay {
  0% {
    transform: scale(1); 
    filter: blur(0px); 
    opacity: 1; /* Começa clara */

}
  50% {
    transform: scale(0.8); 
    filter: blur(10px); 
    opacity: 0.8; /* Diminui tamanho e opacidade */
  }
  100% {
    transform: scale(0.6);
    filter: blur(20px); 
    opacity: 0.5; /* Reduz ainda mais */
  }
}

/* Keyframes para a animação de fragmentos de memória */
@keyframes memoryFragments {
  0% {
    opacity: 0;
    transform: scale(1); 
  }
  50% {
    opacity: 1; /* Aparece */
    transform: scale(1.2); /* Expansão */
  }
  100% { 
    opacity: 0.5;
    transform: scale(0.8); /* Diminui de tamanho */
    
  }
}

Estrutura do contêiner de animação HTML

Recomendado

Um código do texto

CodePen Home Dia dos Namorados

Animação de transformação SVG

HTML

CSS

JS

Recomendado

Um código do texto

CodePen Home Dia dos Namorados

Animação de transformação SVG

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS