Struttura di animazione a blocchi CSS

312 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

13 November 2024

Modello HTML del dashboard dell'atelier di alta moda

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #1F2125; 
  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;
    
}

.container-block {
    position: relative;
    width: 200px;
    height: 200px;
    background: #fffff2;
    margin: 5px;
}
  
.block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1); 
    opacity: 0;
    animation: appear .5s ease-in-out forwards 1s;
  }
.block:nth-child(1) {
    animation-delay: 0s; 
}
.block:nth-child(2) {
    animation-delay: 0.1s;
}
.block:nth-child(3) {
    animation-delay: 0.2s; 
}
.block:nth-child(4) {
    animation-delay: 0.3s; 
} 
.block:nth-child(5) {
    animation-delay: 0.4s; 
}
.block:nth-child(6) {
    animation-delay: 0.5s; 
}

/* Esse efeito visual simula a sensação de bloqueio criativo, os blocos aparecem de forma desorganizada e ficam "atravessando" um ao outro, criando a impressão de caos mental */

@keyframes appear {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 0; 
    }
    50% {
      transform: translate(-50%, -50%) scale(1.2);
      opacity: 0.8;
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0; 
    }
}

Struttura di animazione a blocchi CSS

Consigliato

menu di navigazione

Negozio di scarpe

Modello HTML del dashboard dell'atelier di alta moda

HTML

CSS

JS

Consigliato

menu di navigazione

Negozio di scarpe

Modello HTML del dashboard dell'atelier di alta moda

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS