सीएसएस ब्लॉक एनीमेशन संरचना

873 byby.createsite

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

अनुशंसित

22 June 2025

सीएसएस त्रिभुज टॉगल एनीमेशन

21 August 2025

उलटी गिनती के साथ CSS एनीमेशन कंटेनर

10 August 2025

सीएसएस एलियन अंतरिक्ष यान एनीमेशन सितारों के साथ

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

अनुशंसित

सीएसएस त्रिभुज टॉगल एनीमेशन

उलटी गिनती के साथ CSS एनीमेशन कंटेनर

सीएसएस एलियन अंतरिक्ष यान एनीमेशन सितारों के साथ

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS