• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Facebook как анимированное окно загрузки (Анимация для загрузки страниц сайта как на Facebook)
Facebook как анимированное окно загрузки
Kosten
Воскресенье, 26 Мая 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
В этом материале вы узнаете, как сделать потрясающую анимацию с использованием нескольких фоновых изображений и линейных градиентов в CSS. Где создадим анимацию загрузки Facebook, используя только один элемент HTML.

Для простоты вы не увидите никаких префиксов поставщиков в CSS.



HTML

Код
<div class="seduka-nexazop">
<div class="kidesam">
  <div class="kidesam-Img"></div>
  <div class="kidesam-manedum"></div>
  <div class="kidesam-lposezav"></div>
</div>
<div class="kidesam-kilasd"></div>
<div class="kidesam-aserza"></div>
<div class="kidesam-dsazed"></div>
</div>

CSS

Код
.seduka-nexazop{
  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;
}
.kidesam{
  width:100%;
  height:30px;
}
.kidesam-Img{
  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;
}
.kidesam-manedum, .kidesam-lposezav, .kidesam-kilasd, .kidesam-aserza, .kidesam-dsazed{
  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;}
}
.kidesam-manedum{
  left:50px;
  top:-33px;
  width: 25%;
}
.kidesam-lposezav{
  left:50px;
  top:-20px;
  width: 15%;
}
.kidesam-kilasd{
  left:0px;
  top:30px;
  width: 80%;
}
.kidesam-aserza{
  left:0px;
  top:45px;
  width: 90%;
}
.kidesam-dsazed{
  left:0px;
  top:60px;
  width: 50%;
}


На этом все, точнее создали на чистом CSS3 - Facebook как анимированное окно загрузки контента.

Демонстрация
Прикрепления: 9013212.png (2.1 Kb) · content-box.zip (2.1 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Facebook как анимированное окно загрузки (Анимация для загрузки страниц сайта как на Facebook)
  • Страница 1 из 1
  • 1
Поиск: