Livelli di animazione CSS: Allerta e gioia

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

10 December 2024

Pagina di destinazione dello chef personale

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

Livelli di animazione CSS: Allerta e gioia

Consigliato

Clone di Spotify

Pulsante Mi piace

Pagina di destinazione dello chef personale

HTML

CSS

JS

Consigliato

Clone di Spotify

Pulsante Mi piace

Pagina di destinazione dello chef personale

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS