CSS

3 minute pentru CSS

O colecție de fragmente CSS utile care le puteți înțelege în 3 minute sau mai puțin

Written by A K
· 1 min read >
Bounce loader

Cum sa creezi un simplu loader cu animație .

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>
@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}
.bouncing-loader {
  display: flex;
  justify-content: center;
}
.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}
Demo

See the Pen Bouncing loader by Andrei Cojocari (@sinups) on CodePen.

Explicație

Notă: 1rem este egal cu 16px .

  1. @keyframes definește o animație care are două stări, în care se schimbă opacity și se muta în plan 2D folosind transform: translate3d(). Folosirea unei mutari cu o singură axă transform: translate3d()îmbunătățește performanța animației.
  2. .bouncing-loader este containerul părinte pentru ceruclețele cu animație bouncing si folosește display: flex și justify-content: center pentu a poziționa la centru aceste elemente.
  3. .bouncing-loader > div, selectează celi trei copii div ale părintelui care urmează să fie stilizate. Acestor  divuri le este data o lățime și o înălțime de 1rem, folosind border-radius: 50% pentru a le transforma din pătrate în cercuri.
  4. margin: 3rem 0.2rem specifică faptul că fiecare cerc are o margine de sus / jos  3rem stânga / dreapta 0.2rem astfel încât să nu se atingă unul de altul, oferindu-le spatiu între ele.
  5. animationeste o proprietate prescurtată pentru diferitele proprietăți ale animație: animation-nameanimation-durationanimation-iteration-countanimation-direction care sunt utilizate.
  6. nth-child(n) vizează elementul care este al n-lea copil al părintelui său.
  7. animation-delayeste folosit pentru al 2 și 3 div , astfel încât fiecare element să nu pornească animația în același timp.
Suportul in browsere

97.14%

https://caniuse.com/#feat=css-animation

Written by A K
I'm a Software Developer with BSc in IT and MSs in Math. 👇 I have solid background in : ✅ HTML5, HTML, xHTML, XML <br> ✅ CSS3, CSS, SASS, LESS ✅ JavaScript, JQuery, Vue.js ✅ PHP, MySQL, AJAX, JSON, MVC, Git ✅ WordPress, Cs-Cart, Magento,Dle,ModX, Profile

Tips for Keeping Kids Occupied on Road Trips

A K in CSS
  ·   1 min read

Ideas are your main currency as a travel writer

A K in CSS
  ·   1 min read

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *