Betöltési állapot vagy folyamatanimáció létrehozása Vanilla CSS használatával

Ebben a cikkben lépésről lépésre haladunk meg a Betöltési állapot vagy az Építési folyamat animációjának Vanilla CSS használatával.

Ha ki szeretné hagyni az olvasást, nézzen meg rajta YouTube-videót. A link a cikk végén található.

1. lépés: A háttértéma beállítása

A em-et fogjuk használni a px helyett a css-ben, így módosíthatjuk az animáció méretét a html-ben található "betűméret" módosításával.

 <div id=”building” style=”font-size:12px”>
  <div id=”blocks”>
  </div>
  <div class=”caption”>
  </div>
 </div>

 body {
  background: #050115;
  color: #d5fff7;
  font-family: Arial;
  overflow: hidden;
 }

2. lépés: Hely beállítása a blokkokhoz és a feliratokhoz

Ezzel az animációnk és a feliratunk az oldal közepére kerül, ahol a felirat az animáció jobb oldalán található.

 #building {
  display: flex;
  width: 35em;
  height: 100vh;
  margin: auto;
 }
 #blocks {
  margin: auto;
 }
 #caption {
  padding-left: 0.5em;
  margin: auto;
  font-size: 2.5em;
 }

3. lépés: A blokkok hozzáadása

Mivel négy egyforma blokkunk lesz, közös osztályt adunk nekik b néven, és a kiigazításhoz egyedi azonosítókat adunk nekik: b1, b2 , b3 és b4.

 <div id=”blocks”>
  <div class=”b” id=”b1"></div>
  <div class=”b” id=”b2"></div>
  <div class=”b” id=”b3"></div>
  <div class=”b” id=”b4"></div>
 </div>

 .b {
  background: #d5fff7;
  border: 0.3em solid #89f2f2;
  width: 4.5em;
  height: 4.5em;
  border-radius: 0.5em;
  margin: 1em;
  position: relative;
 }

Most megvan a négy dobozunk. Ezután helyezzük el őket.

4. lépés: A dobozok elhelyezése

A b2, b3 és b4 pozíciót a b1-hez képest helyezzük el.

 #b2 {
  margin-left: 7.25em;
 }
 #b3 {
  margin-top: -6em;
 }
 #b4 {
  margin-left: 7.25em;
 }

5. lépés: A blokkok animálása

Négy blokkunk van, ezért egyedi animációs nevet kell adnunk nekik, és másképp kell animálnunk őket. De ugyanaz lesz az animation-duration, animation-itration-count és animation-timing-function. Tehát az alábbiak szerint járunk el.

 .b{
  …
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
 }
 #b1 {
  animation-name: b1;
 }
 #b2 {
  …
  animation-name: b2; 
 }
 #b3 {
  …
  animation-name: b3;
 }
 #b4 {
  …
  animation-name: b4;
 }
 @keyframes b1 {
  0% {
   left: 0em;
   transform: rotate(0deg);
  }
  50% {
   left: 6.25em;
   bottom: 0em;
   transform: rotate(90deg);
  }
  100% {
   left: 6.25em;
   bottom: -6.125em;
   transform: rotate(90deg);
  }
 }
 @keyframes b2 {
  50% {
   bottom: 0em;
  }
  100% {
   bottom: -6.125em;
  }
 }
 @keyframes b3 {
  50% {
   top: 0em;
  }
  100% {
   top: -6.125em;
  }
 }
 @keyframes b4 {
  0% {
   left: 0em;
   transform: rotate(0deg);
  }
  50% {
   left: -6.25em;
   top: 0em;
   transform: rotate(90deg);
  }
  100% {
   left: -6.25em;
   top: -6.125em;
   transform: rotate(90deg);
  }
 }

6. lépés: Felirat hozzáadása és beállítása a kis képernyőhöz

Itt mást is tehet, ha elhelyezheti a feliratot az animáció alatt, de én jobban szeretem, ha kis képernyőn rejtve van.

 <div id=”caption”>
  Your product is almost ready…
 </div>

 @media (max-width: 400px) {
  #building {
   width: 100%;
  }
  #caption {
   display: none;
  }
 }

Köszönjük, hogy elolvasta. Ha további frissítéseket szeretne kapni, és más közösségi médián szeretne kapcsolatba lépni, kattintson a következő linkre: Designing Coder