• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Прелоадер с красивой анимацией на CSS3 (Красивая анимированная перезагрузка для сайта)
Прелоадер с красивой анимацией на CSS3
Kosten
Дата: Понедельник, 2018-12-17, 19:49 | Сообщение 1
Администраторы
Сообщений:24185
Награды: 56


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

А если происходит так, что все занимает более 4 секунд, то здесь больше всего не кто не будет ждать а закроет. И вот по этой части можно поставить что то, чтоб вас развлекло, и это будет красивая анимация загрузчика.



HTML

Код
<div class="kamudkol-vacugnes">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>


CSS

Код
@keyframes loader {
  0% {transform:rotate(-45deg)}
  50%{transform:rotate(-135deg)}
  100%{transform:rotate(-225deg)}}
@keyframes span-1 {
  0% {transform:translate(0);}
  50%{transform:translate(-50px, 0);border-color:#da3651}
  100%{transform:translate(0);}}
@keyframes span-2 {
  0%{transform:translate(0);}
  50%{transform:translate(50px, 0);border-color:#865075}
  100%{transform:translate(0);}}
@keyframes span-3 {
  0%{transform:translate(0);}
  50%{transform:translate(0, -50px);border-color:#e48d0b}
  100%{transform:translate(0);}}
@keyframes span-4 {
  0%{transform:translate(0);}
  50%{transform:translate(0, 50px);border-color:#0bcddc}
  100%{transform:translate(0);}}
.kamudkol-vacugnes {
  width: 48px;
  height: 48px;
  position: relative;
  animation: loader 2s infinite ease-in-out;
}
.kamudkol-vacugnes span {
  width: 48px;
  height: 48px;
  position: absolute;
  left: 0;
  top: 0;
  border: 4px solid #081948;
}
.kamudkol-vacugnes span:nth-child(1) {
  animation: span-1 2s ease-in-out infinite;
}
.kamudkol-vacugnes span:nth-child(2) {
  animation: span-2 2s ease-in-out infinite;
}
.kamudkol-vacugnes span:nth-child(3) {
  animation: span-3 2s ease-in-out infinite;
}
.kamudkol-vacugnes span:nth-child(4) {
  animation: span-4 2s ease-in-out infinite;
}


Вероятно это самый простой по своей конструкций загрузчик.

Демонстрация
Прикрепления: 3624934.png(12.7 Kb) · proias.zip(2.3 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Прелоадер с красивой анимацией на CSS3 (Красивая анимированная перезагрузка для сайта)
  • Страница 1 из 1
  • 1
Поиск: