Если вы потратили какое-то значительное время в Интернете, вы почти наверняка видели небольшие анимации, которые указывают, что страница, изображение или другой веб-элемент загружается или обрабатывается. Вы можете легко столкнуться с этим во многих ситуациях, таких как транзакции PayPal, навигация в Facebook, вход в систему, отправка форм и многие другие веб-контексты.
Эти анимации не только хорошо выглядят, но и дают ощущение сложной обработки на серверной части. Более всего, эти анимации говорят пользователю, что «колеса в движении», что их запрос обрабатывается. Без них пользователи часто остаются в неведении, задаваясь вопросом, действительно ли что-то происходит.
В большинстве случаев используемые изображения представляют собой файлы GIF, которые работают непрерывно, пока не произойдет другое событие. Как правило, создание загрузочных графических изображений требует хорошего знания программного обеспечения для редактирования фотографий, такого как Photoshop, CorelDraw или аналогичного, которое может включать сложные процедуры и настройки. Изображения в формате GIF также могут иметь большой размер и загружаться во внешнем интерфейсе.
Примеры загрузки GIF-файлов
Лучшая альтернатива таким тяжелым графическим изображениям — использование методологий CSS3 для их замены. Используя только базовые элементы HTML, такие как span и свойства CSS3, такие как 3D-трансформация, вы можете создавать красивые и чрезвычайно легкие анимации.
Одним из основных преимуществ использования CSS-методов перед GIF-изображениями является то, что они не требуют много времени для загрузки. Они намного быстрее и доступны, когда они нам нужны.
ПРИМЕЧАНИЕ. Если вы не знакомы со свойствами преобразования CSS3, я настоятельно рекомендую вам прочитать « Продвинутые методы CSS3 2D и 3D преобразования », в которых я освещаю эту тему.
В этой статье я покажу вам, как создавать красивые загрузочные анимации, используя только CSS3 и HTML.
Давайте сначала начнем с проектирования структуры загрузки анимации с использованием HTML.
Структура Использование HTML
Мы создадим контейнер div с loadingdiv а затем loadingdiv пять элементов span. Следуйте примеру ниже:
<div class = "loadingdiv"> <SPAN> </ SPAN> <SPAN> </ SPAN> <SPAN> </ SPAN> <SPAN> </ SPAN> <SPAN> </ SPAN> </ DIV>
Анимация загрузки, которую я буду создавать, будет состоять из пяти кружков, как показано на рисунке ниже:
Каждый диапазон в приведенном выше HTML-коде будет выполнен в форме кругов, каждый из которых имеет разные цвета, но имеет одинаковые свойства CSS, которые мы скоро увидим.
Основной CSS
.loadingdiv span { дисплей: встроенный блок; выравнивание по вертикали: среднее; ширина: 10 пикселей; высота: 10 пикселей; поле: 50px авто; фон: # 174C4F; радиус границы: 5 пикселей; -webkit-animation: загрузка 0,9 с бесконечной альтернативой; -moz-animation: загрузка 0.9s бесконечной альтернативы; тень от коробки: 1px 1px 1px # 444444; }
Мы установили свойство display для span в inline-block чтобы каждый круг плавал рядом с предыдущим span.
Теперь вы можете подумать: «Почему он просто не float:left ?»
Основная причина в том, что когда мы непрерывно изменяем отдельные высоты каждого пролета, они будут неупорядочены и анимация будет выглядеть неправильно. Использование inline-block предотвратит расположение элементов span-ов друг над другом, когда высота предыдущего диапазона уменьшится.
Мы также установили свойство vertical-align на middle чтобы круг оставался посередине вертикальной линии при изменении его формы. Это будет понятнее, когда мы закончим применять CSS3-преобразование к вышеуказанным диапазонам.
Мы также привязали loading именованной анимации к элементу span. Скоро мы определим анимацию loading с помощью ключевых кадров. Чтобы быть в безопасности, мы использовали определенную производителем анимацию, которая, как ожидается, будет работать практически во всех современных браузерах.
Теперь, если вы откроете браузер и зайдите на веб-страницу, у вас будет пять статических кругов одинакового цвета.
Наша следующая цель — изменить цвета каждого круга.
Давайте посмотрим, как это сделать:
.loadingdiv span: nth-of-type (2) { фон: # 207178; -webkit-animation-delay: 0,2 с; -moz-animation-delay: 0,2 с; } .loadingdiv span: nth-of-type (3) { фон: # FF9666; -webkit-animation-delay: 0,4 с; -moz-animation-delay: 0,4 с; } .loadingdiv span: nth-of-type (4) { фон: # FFE184; -webkit-animation-delay: 0,6 с; -moz-animation-delay: 0,6 с; } .loadingdiv span: nth-of-type (5) { фон: # F5E9BE; -webkit-animation-delay: 0,8 с; -moz-animation-delay: 0,8 с; }
Мы использовали псевдокласс nth-of-type чтобы установить цвета каждого соседнего круга. Вы также можете видеть задержку 0,2 с в свойстве animation для каждого диапазона. Это позволяет пролетам действовать через 0,2 с от времени действия предыдущего размаха. Таким образом, диапазон покажет анимацию в непрерывном режиме.
Теперь давайте определим анимацию, используя CSS3 Transforms и Keyframes. Вот так!
@ -webkit-keyframes loading { 0% { ширина: 10 пикселей; высота: 10 пикселей; -webkit-transform: translateZ (0); } 100% { ширина: 24 пикселя; высота: 24 пикс; -webkit-transform: translateZ (-21px); } } @ -moz-keyframes loading { 0% { ширина: 10 пикселей; высота: 10 пикселей; -moz-transform: translateZ (0); } 100% { ширина: 24 пикселя; высота: 24 пикс; -moz-transform: translateZ (-21px); } }
Как видите, мы снова отдали предпочтение определениям ключевых кадров, зависящих от поставщика. Вы должны определить свойство каждого промежутка в 0% времени и в 100% времени, т. Е. При завершении.
Мы установили ширину и высоту круга равными 10px при 0% и 24px при 100%. Таким образом, каждый круг растет многократно один за другим.
Чтобы они выглядели более стильно, мы использовали translateZ которого установлено 0px при 0% и -21px при 100%. Это придаст кружку повышенный эффект, выходя за пределы экрана.
Теперь давайте немного поэкспериментируем!
1) Попробуйте изменить свойство transformZ с transformZ на transformY . Вы получите другой эффект в том, что круги будут двигаться вертикально.
2) Удалите свойство background из каждого диапазона и сделайте их одинаковыми по цвету. Допустим, мы пойдем с #888888 . Также добавьте opacity:0.1 при 0% трансформации и opacity:1 при 100% трансформации. Мы посмотрим, как показано ниже:
Таким образом, вы можете создавать неограниченное количество уникальных и стильных анимаций загрузки, не прибегая к хлопотным методам Photoshop.
Конечно, вы можете использовать свои творческие способности CSS3, чтобы создавать больше украшенных объектов, чем просто круги, которые я использовал для пояснительных целей.
Надеюсь, вам понравился пост и этот небольшой трюк CSS. Если у вас есть какие-либо вопросы, оставьте примечание ниже в разделе обсуждений.
Думаешь, ты знаешь CSS? Проверьте свои навыки здесь.