Extrait de code d'animation CSS Heart

1,563 byby.createsite

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

Recommandé

13 December 2025

Code Canvas HTML WebGL de Super Mario 64

12 December 2025

Simulateur de pizzeria FNAF

24 November 2025

Les bases de Baldi

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