Extrait de code d'animation CSS Heart

1,562 byby.createsite

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

19 October 2026

Jeu de tir d'arcade 99 Balls en HTML5 Canvas

8 July 2025

Page de destination du magasin de meubles

9 December 2025

Formulaire de connexion HTML avec style CSS néon

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";}