• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Анимация подпрыгивающего загрузчика в CSS (Создание анимации на подпрыгивающий загрузчик в стиле css)
Анимация подпрыгивающего загрузчика в CSS
Kosten
Понедельник, 01 Апреля 2019 | Сообщение 1
Онлайн
Администраторы
Сообщений:44269
Награды: 70
Если решили на сайте установить погрузчик, это когда страница загружается, то эта анимация будет на какое то время отвлекать. То это решение самое простое и как можно заметить по сети интернет популярное. Ведь такой стиль можно увидеть на многих сайтах, не говоря с какой они тематикой.



HTML

Код
<div class="pdegamuis-kacenumaqin">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

Код
@keyframes pdegamuis-kacenumaqin {
  to {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}
.pdegamuis-kacenumaqin {
  display: flex;
  justify-content: center;
}
.pdegamuis-kacenumaqin > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: pdegamuis-kacenumaqin 0.6s infinite alternate;
}
.pdegamuis-kacenumaqin > div:nth-child(2) {
  animation-delay: 0.2s;
}
.pdegamuis-kacenumaqin > div:nth-child(3) {
  animation-delay: 0.4s;
}


Примечание: 1remобычно 16px.

- @keyframes определяет анимацию, которая имеет два состояния, где элемент изменяется opacity и переводится на 2D-плоскость с помощью transform: translate3d(). Использование одноосной трансляции transform: translate3d()повышает производительность анимации.

- .bouncing-loader является родительским контейнером прыгающих кругов и использует display: flexи justify-content: center расположить их в центре.

- .bouncing-loader > div предназначается для трех дочерних div элементов родительского стиля, который будет стилизован. В div дает ширину и высоту 1rem, используя border-radius: 50% чтобы превратить их из квадратов кругов.

- margin: 3rem 0.2rem указывает, что у каждого круга есть верхний, нижний край 3remи левый, правый край, 0.2rem чтобы они не касались друг друга, давая им некоторое пространство для дыхания.

- animation свойство является обобщающим для различных свойств анимации: animation-name, animation-duration, animation-iteration-count, animation-direction используется.

- nth-child(n) предназначается для элемента, который является дочерним элементом его родителя.

- animation-delay используется для второго и третьего div соответственно, чтобы каждый элемент не запускал анимацию одновременно.

Демонстрация
Прикрепления: 3632763.png (1.9 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Анимация подпрыгивающего загрузчика в CSS (Создание анимации на подпрыгивающий загрузчик в стиле css)
  • Страница 1 из 1
  • 1
Поиск: