Page d'erreur 404 animée avec cœur et particules

1,346 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Page d'erreur 404 animée avec cœur et particules

Recommandé

14 January 2026

Recherche Scratch en japonais : Projets et studios

16 January 2026

Lecteur de jeux Flash avec émulateur Ruffle

16 January 2026

Lecteur de jeux Flash avec émulateur Ruffle

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #141C26; /* Tons de preto para combinar com a estética digital */
  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 {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 80px solid #F82672; /* Cor vermelha vibrante */
  animation: heartbeat 2s linear infinite; 
}
@keyframes heartbeat {
  0% {
    transform: scale(1); opacity: 1;
  }
  50% {
    transform: scale(1.2) rotate(10deg); opacity: 0.3; 
  }
  100% {
    transform: scale(1); opacity: 1;
  }
}

.error-message {
  font-family: 'Arial', sans-serif;
  font-size: 32px;
  color: #F92672;
  position: absolute; 
  transform: rotate(-15deg);
  opacity: 0;
  animation: fade-in 0.5s ease-in-out forwards;
}

.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #F8F8F2; 
  border-radius: 50%;
  animation: pulsate 1.5s ease-in-out infinite; 
}
@keyframes pulsate {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1); 
  }
}