Extrait de code d'animation CSS Heart

1,381 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

15 July 2025

Exemple de formulaire de connexion animé HTML

13 June 2025

Un code de Metehan

25 November 2025

Code source HTML5 du jeu Stick Merge

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #1b1c27;
  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;
}
.heart {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  animation: pulse 2s infinite alternate;
}
.heart::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  background: #F92672;
  border-radius: 50%;
  transform: scale(0.5);
}
.heart::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  background: #F92672;
  border-radius: 50%;
  transform: scale(0.5) rotate(45deg);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}