• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Загрузка анимации Facebook с помощью CSS (Как создать анимацию в Facebook после использования css ...)
Загрузка анимации Facebook с помощью CSS
Kosten
Дата: Воскресенье, 2019-05-26, 03:37 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24946
Награды: 57


В сети появляются много вопросов, это как можно самостоятельно создать анимацию в Facebook на чистом CSS. Давайте рассмотрим этот вариант загрузки, который аналогично выполнен на чистом стиле, также с таким же дизайном и анимацией, только CSS изменен.

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



HTML

Код
<div class="vedukas-medopesab">
<div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div></div>
<div></div>
<div></div>
</div>


CSS

Код
.vedukas-medopesab{
  background-color: rgb(255, 255, 255);
  border-radius: 3px;
  border-bottom: rgb(208, 209, 213) solid 1px;
  border-left: rgb(223, 224, 228) solid 1px;
  border-right-color: rgb(223, 224, 228) solid 1px;
  border-top-color: rgb(229, 230, 233) solid 1px;
  display: block;
  height: 324px;
  width: 494px;
  padding: 12px;
}

.vedukas-medopesab > div:nth-child(1){
  width:100%;
  height:30px;
}

.vedukas-medopesab > div > div:nth-child(1){
  position:relative;
  left:0;
  background-color: #CCC;
  height: 40px;
  width: 40px;
  animation-name: shine;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.vedukas-medopesab > div > div:nth-child(2),
.vedukas-medopesab > div > div:nth-child(3),
.vedukas-medopesab > div:nth-child(2),
.vedukas-medopesab > div:nth-child(3),
.vedukas-medopesab > div:nth-child(4){
  position:relative;
  background-color: #CCC;
  height: 6px;
  animation-name: shine;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes shine {
    from {transition:none;}
    to {background-color:#f6f7f8;transition: all 0.3s ease-out;}
}

.vedukas-medopesab > div > div:nth-child(2){
  left:50px;
  top:-33px;
  width: 25%;
}

.vedukas-medopesab > div > div:nth-child(3){
  left:50px;
  top:-20px;
  width: 15%;
}

.vedukas-medopesab > div:nth-child(2){
  left:0px;
  top:30px;
  width: 80%;
}

.vedukas-medopesab > div:nth-child(3){
  left:0px;
  top:45px;
  width: 90%;
}

.vedukas-medopesab > div:nth-child(4){
  left:0px;
  top:60px;
  width: 50%;
}

Тщательно продуманный дизайн учитывает различные скорости интернета и отображает состояние загрузки для пользователя. Также можете посмотреть аналогичную загрузку по дизайну, которая немного по другому создана.

Демонстрация
Прикрепления: 9632639.png(6.4 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Загрузка анимации Facebook с помощью CSS (Как создать анимацию в Facebook после использования css ...)
  • Страница 1 из 1
  • 1
Поиск: