
Пять анимаций на чистом CSS
- 10 июля 2019
- 2 мин
- 12 363
Знание СSS нужно, чтобы создавать удобные интерфейсы и оформлять страницы сайта: стилизовать текст, позиционировать блоки, добавлять интерактивные элементы. А ещё c помощью CSS можно создавать крутые картинки, логотипы и анимацию. Собрали пять нестандартных примеров использования языка.
Логотипы браузеров
Нарисуйте свой логотип любимого браузера и добавьте анимацию, чтобы он стал интерактивным и живым. Вот как это можно сделать с помощью CSS.
See the Pen Browsers by Jordano Aragão (@jordanoaragao) on CodePen.
Лоадер
Бывает, что нужно подождать, пока информация с сервера загрузится на сайт. Ожидание можно скрасить анимацией.
See the Pen Pure CSS Truck Loader by 0×5e0×5e (@0×5e0×5e) on CodePen.
Бэтмен
Можно бесконечно спорить, какая вселенная лучше — Marvel или DC. А можно сделать вот такого анимированного Бэтмена.
See the Pen Batman Animation Draw. Pure CSS! by Paul (@Maseone) on CodePen.
Страница 404
Когда на сайте возникает ошибка, пользователь видит страницу с её кодом. Для хороших сайтов разработчики создают специальную страницу, стилизуя её. Такой вариант может помочь пользователю чуть меньше расстроиться из-за возникшей ошибки.
See the Pen Pure CSS 404 Error Page by Peiman (@pjthedj) on CodePen.
Ноутбук
Просто милый улыбающийся ноутбук для тех, кто хочет потренироваться работать с анимацией на CSS.
See the Pen Laptop Pure CSS — Day 37 #dailycssimages by FireMugen (@firemugen) on CodePen.
Использование знакомого инструмента для решения нестандартных задач поможет опытным разработчикам лучше запомнить редкие CSS-свойства и применять их для создания сложных интерфейсов. А новички смогут изучить новые свойства языка в игровой форме и улучшить навыки.
Познакомиться с анимацией поближе можно на интерактивном курсе «Динамические эффекты».
Похожие статьи
Работа с Git через консоль
Как сделать форк вашего репозитория в GitHub, создать ветку и начать работу через консоль.
Как подключить стили к HTML-странице
Понадобится всего 30 секунд.
Как настроить работу Телеграм-бота с Google Sheets
Специалисты из REG.RU делятся опытом создания бота.