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

858 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

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

Recommandé

19 January 2026

Générateur de lettres artistiques Flickr (Épelez avec des photos)

17 March 2023

Formulaire d'abonnement à la newsletter

17 May 2024

Accueil animé et formulaire de connexion à l'inscription

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

Recommandé

Générateur de lettres artistiques Flickr (Épelez avec des photos)

Formulaire d'abonnement à la newsletter

Accueil animé et formulaire de connexion à l'inscription

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS