CSS Animation Layers: Alert & Joy

Open In Editor Video Publish Your Code

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

CSS Animation Layers: Alert & Joy

Recommended

CSS Memory Animation Snippet

CSS Animated Button & Layer

Social Icons with Animation

HTML

CSS

JS

Recommended

CSS Memory Animation Snippet

CSS Animated Button & Layer

Social Icons with Animation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS