Struttura di animazione a blocchi CSS

883 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

19 May 2025

animazione di aerei

28 December 2024

Una directory alternativa della home page

10 March 2025

Barra di navigazione reattiva premium

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

Consigliato

animazione di aerei

Una directory alternativa della home page

Barra di navigazione reattiva premium

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS