ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффекты анимации для загрузки на CSS

Эффекты анимации для загрузки на CSS

Вид на сайте анимационной загрузки на CSS всегда впечатляет, если еще красивый элемент установлен, где рассмотрим несколько примеров загрузчиков. В сети интернет можно много встретить оригинальные эффекты, которые исполнены под анимацию для определенной загрузки при помощи чистого CSS. Стили CSS позволяет создавать анимации с переходами и ключевыми кадрами, которые когда-то были возможны только с JavaScript, чтоб не было такого чувства, что они зависят от какого-то специального плагина.

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

Есть десятки способов как можно найти онлайн конструкторы для создания анимации в сети, это безусловно хорошо, но когда онлайн что-то делаешь, то всегда выходит, то большой код, то стилистика как ламантина, что места не хватает для установки. В других случаях свойство анимации CSS на основе ключевых кадров может быть идеальным для непрерывного выполнения фоновых деталей.

Первый вариант:

Отличные эффекты анимации с помощью CSS3

HTML

Код

CSS

Код

.anavemaon {
  position: absolute;
  top: calc(50% - 24px);
  left: calc(50% - 24px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transform: perspective( 128px ) rotateX( 30deg );
}

.vedulan {
  position: absolute;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background-color: #D9CB9E;
  border-radius: 50%;
}

.vedulan.vemaon {
  left: 0%;
  top: 0%;
  animation: move-right 1s ease-out infinite;
}

.vedulan.gasdev {
  right: 0%;
  top: 0%;
  animation: move-down 1s ease-in-out infinite;
}

.vedulan.kasun {
  right: 0%;
  bottom: 0%;
  animation: move-left 1s ease-in-out infinite;
}

.vedulan.bedops {
  left: 0%;
  bottom: 0%;
  animation: move-up 1s ease-out infinite;
}

@keyframes move-right {
  0% {
  transform: translateX(0);
  }
  100% {
  transform: translateX(32px);
  }
}

@keyframes move-down {
  0% {
  transform: translateY();
  }
  100% {
  transform: translateY(32px);
  }
}

@keyframes move-left {
  0% {
  transform: translateX(0);
  }
  100% {
  transform: translateX(-32px);
  }
}

@keyframes move-up {
  0% {
  transform: translateY(0);
  }
  100% {
  transform: translateY(-32px);
  }
}

Здесь идет 2 оттенка, но основном все значение идет под анимацию, что красиво и равномерно происходит.

Демонстрация

Второй вариант:

Простая CSS анимация с помощью @keyframes

HTML

Код

<div class="kasedulansed-omsapev">
<div class="gakebezonseved"></div>
<div id="gakebezonseved-text">Загрузка</div>
</div>

CSS

Код

#link {color: #E45635;display:block;font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;text-align:center; text-decoration: none;}
#link:hover {color: #CCCCCC}

#link, #link:hover {-webkit-transition: color 0.5s ease-out;-moz-transition: color 0.5s ease-out;-ms-transition: color 0.5s ease-out;-o-transition: color 0.5s ease-out;transition: color 0.5s ease-out;}

/** BEGIN CSS **/
  body {background: #333333;}
  @keyframes rotate-gakebezonseved {
  0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
  }

  @-moz-keyframes rotate-gakebezonseved {
  0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
  }

  @-webkit-keyframes rotate-gakebezonseved {
  0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
  }

  @-o-keyframes rotate-gakebezonseved {
  0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
  }

  @keyframes rotate-gakebezonseved {
  0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
  }

  @-moz-keyframes rotate-gakebezonseved {
  0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
  }

  @-webkit-keyframes rotate-gakebezonseved {
  0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
  }

  @-o-keyframes rotate-gakebezonseved {
  0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
  }

  @keyframes gakebezonseved-text-opacity {
  0% {opacity: 0}
  20% {opacity: 0}
  50% {opacity: 1}
  100%{opacity: 0}
  }

  @-moz-keyframes gakebezonseved-text-opacity {
  0% {opacity: 0}
  20% {opacity: 0}
  50% {opacity: 1}
  100%{opacity: 0}
  }

  @-webkit-keyframes gakebezonseved-text-opacity {
  0% {opacity: 0}
  20% {opacity: 0}
  50% {opacity: 1}
  100%{opacity: 0}
  }

  @-o-keyframes gakebezonseved-text-opacity {
  0% {opacity: 0}
  20% {opacity: 0}
  50% {opacity: 1}
  100%{opacity: 0}
  }
  .kasedulansed-omsapev,
  .gakebezonseved {
  height: 100px;
  position: relative;
  width: 100px;
  border-radius: 100%;
  }

  .kasedulansed-omsapev { margin: 40px auto }

  .gakebezonseved {
  border: 2px solid transparent;
  border-color: transparent #fff transparent #FFF;
  -moz-animation: rotate-gakebezonseved 1.5s linear 0s infinite normal;
  -moz-transform-origin: 50% 50%;
  -o-animation: rotate-gakebezonseved 1.5s linear 0s infinite normal;
  -o-transform-origin: 50% 50%;
  -webkit-animation: rotate-gakebezonseved 1.5s linear 0s infinite normal;
  -webkit-transform-origin: 50% 50%;
  animation: rotate-gakebezonseved 1.5s linear 0s infinite normal;
  transform-origin: 50% 50%;
  }

  .kasedulansed-omsapev:hover .gakebezonseved {
  border-color: transparent #E45635 transparent #E45635;
  }
  .kasedulansed-omsapev:hover .gakebezonseved,
  .kasedulansed-omsapev .gakebezonseved {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  }

  #gakebezonseved-text {
  -moz-animation: gakebezonseved-text-opacity 2s linear 0s infinite normal;
  -o-animation: gakebezonseved-text-opacity 2s linear 0s infinite normal;
  -webkit-animation: gakebezonseved-text-opacity 2s linear 0s infinite normal;
  animation: gakebezonseved-text-opacity 2s linear 0s infinite normal;
  color: #ffffff;
  font-family: "Helvetica Neue, "Helvetica", ""arial";
  font-size: 10px;
  font-weight: bold;
  margin-top: 45px;
  opacity: 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  width: 100px;
  }

Отличное решение анимации, которое можно поставить на многие функций ожидание.

Демонстрация

Третий вариант:

Эффект анимации загрузки страницы на чистом css

HTML

Код

CSS

Код

.gavabekon {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  perspective: 800px;
}

.acegardles {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.acegardles.gakeb {
  left: 0%;
  top: 0%;
  animation: rotate-gakeb 1s linear infinite;
  border-bottom: 3px solid #EFEFFA;
}

.acegardles.ezonsev {
  right: 0%;
  top: 0%;
  animation: rotate-ezonsev 1s linear infinite;
  border-right: 3px solid #EFEFFA;
}

.acegardles.dcompesa {
  right: 0%;
  bottom: 0%;
  animation: rotate-dcompesa 1s linear infinite;
  border-top: 3px solid #EFEFFA;
}

@keyframes rotate-gakeb {
  0% {
  transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
  transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-ezonsev {
  0% {
  transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
  transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-dcompesa {
  0% {
  transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
  transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}

Эта вариаций загрузки аналогично первому варианту, только здесь немного другие элементы, что выстроенные совершенно по другой фигуре.

Демонстрация

Здесь можно на чистом стиле много вариантов найти, дело в том, что захотелось, чтоб все варианты были немного схожи друг на друга, но отличались своей анимации.

В других случаях свойство анимации CSS на основе ключевых кадров может быть идеальным для непрерывного выполнения фоновых деталей.

03 Марта 2019 Просмотров: 1260 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0