Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание индикатора загрузки в виде пиксельных сердец

8 апреля 2016 | Опубликовано в css | 1 Комментарий »

«Видеоигры разрушили мою жизнь. Хорошо, что у меня есть запасные жизни». Если Вы любите поиграть в компьютерные игры, как и мы, то Вы, вероятно, уже слышали это высказывание. Возможно, Вы не только любите поиграть в компьютерные игры, но и пишите о них, или даже у Вас есть сайт, посвященный этой теме. Тогда Вам может пригодиться индикатор загрузки в виде пиксельных сердец, который очень подходит к высказыванию выше. 

В этом уроке мы рассмотрим, как создать такой анимированный индикатор с использованием CSS. Надеемся, он Вам понравится и Ваш сайт станет намного оригинальней с помощью такого индикатора загрузки.

 


Рисование с помощью свойства тени блока 

Некоторое время назад рисование с помощью свойства CSS тени блока было очень модным. Этот способ действительно дает много возможностей, не зависимо от того, нравится он или нет.

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

В работе с кодом сложной частью было симулировать перезапуск для наполняющей сердца анимации после конца ее цикла. Чтобы создать желаемый эффект, мы опробовали несколько решений и остановились на временной функции steps().  Согласно описанию, функция steps() позволяет задавать количество ключевых кадров, которые отобразятся во время анимации.

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

Автор урока Catalin Rosu

Смотрите также:




Комментарии

Оставить ответ


9 + = восемнадцать

Вставить изображение