Страница 1 из 11
Общий форум » Раздел для uCoz » HTML коды для сайта uCoz » Анимационная загрузка при помощью CSS3
Анимационная загрузка при помощью CSS3
Kosten
Дата: Понедельник, 27.11.2017, 22:08 | Сообщение 1
Администраторы
Сообщений:16015
Награды: 51


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

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



HTML-код

Первоначально я хотел использовать псевдоэлементы, чтобы иметь меньше элементов разметки. Но дело в том, что сгенерированный контент нельзя анимировать еще в других браузерах, чем Mozilla Firefox.

Вот как выглядит разметка:

Код
<div class="loading-wrap">
  <div class="triangle1"></div>
  <div class="triangle2"></div>
  <div class="triangle3"></div>
</div>


CSS

Здесь вы можете найти интересные вещи:

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

Обратите внимание на промежуток между ключевыми кадрами вращения 20% и 100% для них. Это помогает добавить эффект остановки для анимации.

Код
.loading-wrap {
  width: 60px; height: 60px;
  position: absolute;
  top: 50%; left: 50%;
  margin: -30px 0 0 -30px;
  background: #777;      
  animation: rotation ease-in-out 2s infinite;
  border-radius: 30px;      
}

.triangle1, .triangle2, .triangle3 {
  border-width: 0 20px 30px 20px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #67cbf0;
  height: 0; width: 0;
  position: absolute;
  left: 10px; top: -10px;
  animation: fadecolor 2s 1s infinite;
}

.triangle2, .triangle3 {
  content: '';
  top: 20px; left: 30px;
  animation-delay: 1.1s;
}

.triangle3 {
  left: -10px;
  animation-delay: 1.2s;
}

@keyframes rotation {
    0% {transform: rotate(0deg);}
    20% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}

@keyframes fadecolor {
    0% {border-bottom-color: #eee;}
    100%{border-bottom-color: #67cbf0;}
}


На данный момент я думаю, что анимированный GIF будет лучше работать в большинстве случаев.

Кроме того это не тот пример который защищает использование материалов CSS3 вместо изображений для сохранения HTTP-запросов. Здесь это неприменимо, так как ограниченная поддержка браузеров для анимации CSS3 может что-то сказать.

Демонстрация
Прикрепления: 8706219.png(25Kb)
Страна: (RU)
Общий форум » Раздел для uCoz » HTML коды для сайта uCoz » Анимационная загрузка при помощью CSS3
Страница 1 из 11
Поиск: