Fragmento de código de animación de corazón CSS

Abrir en el editor Publica tu código

Recomendado

6 November 2024

Un sitio web donde puedes reproducir canciones.

24 November 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;
  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);
  }
}

Fragmento de código de animación de corazón CSS

Recomendado

Un sitio web donde puedes reproducir canciones.

Clic de cookies

un código de metehan

HTML

CSS

JS

Recomendado

Un sitio web donde puedes reproducir canciones.

Clic de cookies

un código de metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS