हृदय और कणों के साथ एनिमेटेड 404 त्रुटि पृष्ठ

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

3 March 2025

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

हृदय और कणों के साथ एनिमेटेड 404 त्रुटि पृष्ठ

अनुशंसित

गहरा और हल्का बटन

ड्रैग और व्हील के साथ हिंडोला

एनिमेटेड सोशल मीडिया बटन

HTML

CSS

JS

अनुशंसित

गहरा और हल्का बटन

ड्रैग और व्हील के साथ हिंडोला

एनिमेटेड सोशल मीडिया बटन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS