Создание индикатора загрузки в виде пиксельных сердец
8 апреля 2016 | Опубликовано в css | 1 Комментарий »
«Видеоигры разрушили мою жизнь. Хорошо, что у меня есть запасные жизни». Если Вы любите поиграть в компьютерные игры, как и мы, то Вы, вероятно, уже слышали это высказывание. Возможно, Вы не только любите поиграть в компьютерные игры, но и пишите о них, или даже у Вас есть сайт, посвященный этой теме. Тогда Вам может пригодиться индикатор загрузки в виде пиксельных сердец, который очень подходит к высказыванию выше.
В этом уроке мы рассмотрим, как создать такой анимированный индикатор с использованием CSS. Надеемся, он Вам понравится и Ваш сайт станет намного оригинальней с помощью такого индикатора загрузки.
Рисование с помощью свойства тени блока
Некоторое время назад рисование с помощью свойства CSS тени блока было очень модным. Этот способ действительно дает много возможностей, не зависимо от того, нравится он или нет.
Демонстрация работы использует псевдоэлементы, чтобы уменьшить количество нужных блоков HTML, и с их помощью создается анимация. Вы уже, конечно, знаете, что это возможно, благодаря поддержке псевдоэлементами свойств анимаций и переходов.
В работе с кодом сложной частью было симулировать перезапуск для наполняющей сердца анимации после конца ее цикла. Чтобы создать желаемый эффект, мы опробовали несколько решений и остановились на временной функции steps(). Согласно описанию, функция steps() позволяет задавать количество ключевых кадров, которые отобразятся во время анимации.
Это просто эксперимент, для полноценного использования его может быть нужно еще дорабатывать. Надеемся, он вдохновит Вас на создание уникального индикатора загрузки, который подчеркнет Ваши интересы и выделит Ваш сайт.
Автор урока Catalin Rosu
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191