CSS-анимация: сделайте две простые и удобные в использовании анимации загрузки

Показать результаты

loading1

loading2

loading1

Подготовьте серую округлую фоновую рамку по центру, просто для хорошего вида.

<div class="loading-box">
</div>

.loading-box {
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: #d8d8d8;
    border-radius: 5px;
}

Поместите loading1 и три дочерних элемента в качестве трех прыгающих элементов в loading1.

<div class="loading-box">
    <div class="loading1">
        <div class="loading1-item1"></div>
        <div class="loading1-item2"></div>
        <div class="loading1-item3"></div>
    </div>
</div>

Центрировать загрузку1 вверх и вниз через margin-top и указать высоту и встроенные элементы для центрирования влево и вправо

.loading1 {
  height: 34px;
  margin-top: 33px;
  text-align: center;
}

Затем установите общий стиль для трех элементов и дайте им выровняться по встроенному блоку.

.loading1-item1, .loading1-item2, .loading1-item3 {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #4b9cdb;
  border-radius: 15px;
}

Напишите анимацию, очень просто, просто увеличьте высоту элемента, а затем верните ее обратно.

@keyframes loading1-run {
  0% {
    height: 16px;
  }

  50% {
    height: 34px;
  }

  100% {
    height: 16px;
  }
}

Добавьте письменную анимацию к трем элементам, два пункта:
Один из них - установить задержку 0 с, 0,5 с, 1 с для трех элементов соответственно.
Во-вторых, установить Infinite (воспроизведение цикла анимации)

.loading1-item1 {
  animation: loading1-run 1.5s ease 0s infinite;
}

.loading1-item2 {
  animation: loading1-run 1.5s ease 0.5s infinite;
}

.loading1-item3 {
  animation: loading1-run 1.5s ease 1s infinite;
}

Заканчивать

Многословно, в коде задается только изменение длины, почему эта анимация, кажется, имеет эффект подпрыгивания вверх и вниз? И при изменении высоты элемента элемент должен как бы растягиваться сверху вниз, а не так, как будто низ фиксируется в анимации, а потом растет вверх и потом меняется обратно.

Причина в выравнивании встроенного блока, три элемента выравниваются по умолчанию по базовой линии. Когда первая анимация в 0 начинает становиться высокой, следующие два элемента, не начавшие анимацию, также перемещаются вниз вместе с базовой линией первого элемента.После этого каждый раз, когда элемент просто возвращается в исходное положение, всегда происходит Один элемент становится выше, поэтому каждый элемент выглядит так, как будто дно зафиксировано, и становится выше, а короткий промежуток в изменении создает эффект подпрыгивания.

loading2

Подготовьте серую округлую фоновую рамку по центру, просто для хорошего вида.

<div class="loading-box">
</div>

.loading-box {
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: #d8d8d8;
    border-radius: 5px;
}

Поместите loading2 и четыре дочерних элемента в качестве четырех повернутых элементов в load2.

<div class="loading-box">
    <div class="loading2">
      <div class="loading2-item1"></div>
      <div class="loading2-item2"></div>
      <div class="loading2-item3"></div>
      <div class="loading2-item4"></div>
    </div>
</div>

Установите длину и ширину загрузки2 и отцентрируйте ее вверх, вниз, влево и вправо через поле

.loading2 {
  position: relative;
  width: 46px;
  height: 46px;
  margin: 27px auto 0 auto;
}

Установите общий стиль четырех элементов

.loading2-item1,
.loading2-item2,
.loading2-item3,
.loading2-item4 {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background: red;
}

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

.loading2-item1 {
  position: absolute;
  top: -8px;
  left: 50%;
  margin-left: -8px;
  background: #CDDC39;
}

.loading2-item2 {
  position: absolute;
  right: -8px;
  top: 50%;
  margin-top: -8px;
  background: #3F51B5;
}

.loading2-item3 {
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin-left: -8px;
  background: #F44336;
}

.loading2-item4 {
  position: absolute;
  left: -8px;
  top: 50%;
  margin-top: -8px;
  background: #4CAF50;
}

Пишите анимации, вращайте на 360 градусов

@keyframes loading2-run {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Добавьте анимацию в load2, используйте лайнер (линейную анимацию) и продолжайте играть в цикле.

.loading2 {
  position: relative;
  width: 46px;
  height: 46px;
  margin: 27px auto 0 auto;
  animation: loading2-run 2s linear 0s infinite;
}

Заканчивать

конец