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

1,209 byby.createsite

Abrir en el editor Publica tu código

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

Recomendado

14 October 2024

Una plantilla de página web para "Anes Development" con un mensaje de bienvenida y navegación.

7 May 2024

Plantilla de sitio web de presentaciones HTML y CSS

22 June 2025

Ejemplo de formulario de inicio de sesión HTML

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #171923;
  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;
}
.elemento { 
  position:relative;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    transform-origin: 50% 50%;
    animation: pulsa 2s infinite alternate; }

.elemento > .heart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #f6767b 0%, #a878ab 50%, #a878ab 100%);
    background-color: #f6767b; filter: drop-shadow(2px 2px 8px rgba(0,0,0,0.6));
opacity: 0.7;

animation-delay: var(--delay);
}
@keyframes pulsa {
  0% {
    transform: scale(1) ;
  }
  50% {
    transform: scale(1.2);
    filter:contrast(1.5);
    opacity: 0.9
  }
  100% {
    transform: scale(1);
   filter: contrast(1);
    opacity: 0.7;
}};

.elemento:nth-child(1)  { animation: pulsa 1s linear infinite alternate}
.elemento:nth-child(2)  { animation: pulsa 1.5s ease-in-out infinite alternate}
.elemento:nth-child(3)  { animation: pulsa 2s ease-in infinite alternate}

.elemento:nth-child(1) > .heart { --delay: "0s";}

.elemento:nth-child(2) > .heart { --delay: "0.5s";}
.elemento:nth-child(3) > .heart { --delay: "1s";}