• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Как создать анимацию загрузки на сайте в CSS3 (Как сделать анимацию загрузки на чистом CSS3)
Как создать анимацию загрузки на сайте в CSS3
Kosten
Дата: Понедельник, 2019-02-11, 22:34 | Сообщение 1
Администраторы
Сообщений:19882
Награды: 56


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



Первым делом создаем блок div в html:

Код
<div class="ksunelka_gedsab"></div>


Следующий шаг, это закрепить стили CSS:

Код
@keyframes spin {
  100% {
   transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
100% { -moz-transform:rotate(360deg); }
}

@-webkit-keyframes spin {
100% { -webkit-transform:rotate(360deg); }
}

@-ms-keyframes spin {
100% { -ms-transform:rotate(360deg); }
}

@-o-keyframes spin {
100% { -o-transform:rotate(360deg); }
}

.ksunelka_gedsab {
    width: 28px;
    height: 28px;
    border: 5px solid #191818;
    border-left-color: #2b2a2a;
    border-right-color: rgba(0, 0, 0, 0);
    border-bottom-color: #545050;
    border-radius: 100%;
    animation: spin 600ms infinite linear;
    -moz-animation: spin 600ms infinite linear;
    -o-animation: spin 600ms infinite linear;
    -webkit-animation: spin 600ms infinite linear;
    -ms-animation: spin 600ms infinite linear;
}

Вся настройка происходит в стилистике, это сам оттенок цвета, также ширина, вообщем все оформление.

Демонстрация
Прикрепления: 4536894.png(12.6 Kb) · css011.html.zip(0.6 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Как создать анимацию загрузки на сайте в CSS3 (Как сделать анимацию загрузки на чистом CSS3)
  • Страница 1 из 1
  • 1
Поиск: