सीएसएस एनीमेशन परतें: अलर्ट और जॉय

966 byby.createsite

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

अनुशंसित

29 November 2025

आर्किटेक्चर इंजीनियरिंग टेलविंड सीएसएस वेबसाइट

10 December 2025

अपग्रेड और पुनर्जन्म के साथ क्लिकर गेम

7 August 2025

बटन क्लिक पर Div छिपाएँ: एनीमेशन प्रारंभ करें

HTML

CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #181D31;
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;
}
.layer_alert { /* Uma camada representando o esgotamento mental: desfoque gradual, cores flutuantes */
  width: 100%;
  height: 100%;
  position: absolute;
  animation: thurs_decay 5s linear infinite; /* animação de decay */
}
.layer_joy { /* Uma camada representando o alívio e a esperança: flashes de cores vibrantes e efeito de blur */
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  left: 10%;
  top: 10%;
  background: radial-gradient(circle, #ff2d55, #ffc000, #00b3ff, #00b3ff);
  animation: thurs_flash 2.5s ease-in-out infinite; /* animação de flash de cores */
  animation-delay: 1s; /* delay para criar a sensação de esperança */
}

@keyframes thurs_decay { /* Decay: cores se afogando em luz suave */
  0% {
    /* Cores vibrantes */
    background-color: radial-gradient(ellipse at 50% 50%, rgba(255, 0, 0, 0.8), rgba(255, 192, 0, 0.8), rgba(0, 179, 255, 0.8), rgba(0, 179, 255, 0.8));
    filter: blur(0px);
  }

50% {
    /* Cores se perdem */
    background-color: radial-gradient(ellipse at 50% 50%, rgba(255, 0, 0, 0.2), rgba(255, 192, 0, 0.2), rgba(0, 179, 255, 0.2), rgba(0, 179, 255, 0.2));
    filter: blur(20px);
  }

100% { /* retorno à cor original */
    background-color: radial-gradient(ellipse at 50% 50%, rgba(255, 0, 0, 0.8), rgba(255, 192, 0, 0.8), rgba(0, 179, 255, 0.8), rgba(0, 179, 255, 0.8));
    filter: blur(0px);
  }

}

@keyframes thurs_flash { /* Flash: o alívio da esperança  */
  0% { 
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }  
  100% { 
    opacity: 0;
    transform: scale(0.5);
  }
}

अनुशंसित

आर्किटेक्चर इंजीनियरिंग टेलविंड सीएसएस वेबसाइट

अपग्रेड और पुनर्जन्म के साथ क्लिकर गेम

बटन क्लिक पर Div छिपाएँ: एनीमेशन प्रारंभ करें

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS