В продолжение поста про то, как сделать крестик на чистом CSS, публикуем пример кода, как сделать другой элемент интерфейса: Иконка меню анимированная в крестик на CSS.
Иконка меню – это незаменимый элемент интерфейса сегодня. Они прочно вошли в нашу жизнь из мобильных приложений и сайтов, и теперь уже сложно без них представить и десктопные версии сайтов.
Можно, конечно, сделать иконку меню при помощи просто иконки. А можно немного напрячься и сделать её анимированной и на чистом CSS. Для пользователя будет очень занимательно наблюдать, как иконка модифицируется и анимируется после нажатия, превращаясь в крестик.
Всё это делается при помощи простых свойств CSS и двух псевдо-селекторов :after и :before.
Ниже приводим исходный код, в котором приводится пример, как сделать иконку меню анимированную в крестик на CSS.
Иконка меню анимированная в крестик на CSS
See the Pen Gxgqvz by Evgeniy Kozachenko (@ekwoster) on CodePen.
Также рекомендуем прочитать:
Купите мне кофе