Креативные CSS анимации загрузки страницы

Сегодня мы собираемся сделать много вещей с анимацией CSS. В самом деле, мы будем говорить о загрузке CSS анимаций. Что вы скажете? Готовы?

Несколько вещей, прежде чем мы начнем:
  • Вы не увидите никаких префиксов в CSS, но вы, конечно, найдете их в файлах.
  • Цель урока, чтобы показать весь потенциал CSS, особенно CSS3, поэтому рендеринг может быть изменен на-IE9. Если вы планируете поддерживать эти браузеры, не забудьте сделать резервные варианты.
  • Лично я использую box-model, в которой [ширина] = [Элемент шириной] + [обивка] + [границы]. Мы напишем его так:
Код
*,
*:before,
*:after {
  box-sizing: border-box;
}


CSS: за и против
Каковы преимущества и недостатки чистого CSS? Почему бы не решение JS, или даже старый добрый способ: анимированный GIF? Не существует точного ответа, он не будет зависеть от ситуации. Но позвольте мне дать вам некоторые идеи.

Плюсы 
  • CSS легко редактируется: вы можете быстро изменить длительность, скорость, цвет или что вы хотите на вашей анимации
  • CSS можно масштабировать по своему усмотрению без потери качества
  • CSS анимации быстрее, чем JS "анимации", так как они используют родной движок браузера
  • CSS анимации используют GPU ускорение: если у вас есть мощное устройство, у вас будет очень быстрая и плавная анимация 
Минусы

  • CSS анимации не имеют полной поддержки браузера: IE9 и Opera Mini не понимаю их
  • CSS прелоадеры обычно состоят из тяжелой разметки.
 

Мы начнем с чем-то довольно простого, как всегда. Наша маленькая сфера работает бесконечно слева направо в баре.

HTML

Код
<div class="bar">
  <i class="sphere"></i>
</div>

Довольно минималистично, не так ли?

CSS 

 Во-первых, мы создаем контейнер для сферы: бар. Чтобы сохранить пропорции и сделать Preloaders масштабируемой. Просто измените размер шрифта значение на обертке для масштабирования всего этого, как вы хотите. Довольно просто, да?

Код
.demo-1 .bar {
  font-size: 20px;
  width: 10em;
  height: 1em;
  position: relative;
  margin: 100px auto;

  border-radius: .5em;
  background: white;
  background: rgba(255,255,255,0.6);
  box-shadow:  
  0 0 0 .05em rgba(100,100,100,0.075),
  0 0 0 .25em rgba(0,0,0,0.1),  
  inset 0 .1em .05em rgba(0,0,0,0.1),  
  0 .05em rgba(255,255,255,0.7);  
}

Давайте оформим слово "Подождите.". Вы, наверное, заметили, его нет в разметке: это потому, псевдо элемент с контентом "Подождите".

Код
.demo-1 .bar:after {
  content: "Please wait.";
  position: absolute;
  left: 25%;
  top: 150%;
  font-family: 'Carrois Gothic', sans-serif;
  font-size: 1em;
  color: #555;
  text-shadow: 0 .05em rgba(255,255,255,0.7);
}

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

Код
.demo-1 .sphere {
  display: block;
  width: 1em;
  height: 100%;
   
  border-radius: 50%;
  background: linear-gradient(#eee, #ddd);
  box-shadow:
  inset 0 .15em .1em rgba(255,255,255,0.3),
  inset 0 -.1em .15em rgba(0,0,0,0.15),  
  0 0 .25em rgba(0,0,0,0.3);  
   
  animation: move 1.75s ease-in-out infinite alternate;
}

Последнее, но не менее важное, ключевые кадры запуска анимации:

Код
@keyframes move {
  to { margin-left: 90%; }
}

Все как можно просто, не так ли? Таким образом, сфере задан ход анимации в 1,75 секунд, от начала до конца и от конца в начало.

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

Тут вам представлено 5 версий. Наслаждайтесь

  • FalleN

  • 4251

  • 1

  • 243

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!