Trecho de código de animação de coração CSS

414 ByBy.inc

Abrir no Editor Publique Seu Código

Trecho de código de animação de coração CSS

Recomendado

22 August 2025

Exemplo de botões de contato HTML

5 June 2025

Página de autenticação Login/Inscrição

5 February 2025

página de login moderna e futurista

HTML

CSS

* {
  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;
  z-index: 1;
}
.heart {
  width: 150px;
  height: 150px;
  position: relative;
  clip-path: polygon(50% 0%, 100% 22%, 75% 88%, 25% 88%, 0% 22%);
  animation: beat 1.5s ease-in-out infinite;
}
.heart::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f04040, #ed2f2f);
  box-shadow: 0 0 20px #d40000;
  filter: blur(5px);
  animation: glitch 2s linear infinite;
}

@keyframes beat {
  0% {
    transform: scale(1.0);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.0);
    opacity: 1;
  }  
}

@keyframes glitch {
  0% {
    transform: rotate(0deg);
  }
  30% {
    filter: blur(0px);
  }
  50% {
    transform: rotate(1deg);
  }
  100% {
    filter: blur(8px);
    transform: rotate(0deg);
  }
}

Recomendado

Exemplo de botões de contato HTML

Página de autenticação Login/Inscrição

página de login moderna e futurista

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS