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

969 byby.createsite

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

अनुशंसित

30 August 2024

शुद्ध सीएसएस वन डिव हाउस उत्तरदायी एनीमेशन

20 April 2024

HTML और CSS का उपयोग करके सोशल आइकन

25 August 2024

यूआई एनीमेशन उत्पादों की खोज

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

अनुशंसित

शुद्ध सीएसएस वन डिव हाउस उत्तरदायी एनीमेशन

HTML और CSS का उपयोग करके सोशल आइकन

यूआई एनीमेशन उत्पादों की खोज

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS