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

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

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

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

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

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

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

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

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

• Интересные эффекты с использованием свойства CSS3 тени блока
• Создание аккуратного индикатора загрузки с использованием CSS
• Легко настраиваемый круглый индикатор загрузки с использованием CSS