В продолжение поста про то, как сделать крестик на чистом CSS, публикуем пример кода, как сделать другой элемент интерфейса: Иконка меню анимированная в крестик на CSS.

Иконка меню – это незаменимый элемент интерфейса сегодня. Они прочно вошли в нашу жизнь из мобильных приложений и сайтов, и теперь уже сложно без них представить и десктопные версии сайтов.

Можно, конечно, сделать иконку меню при помощи просто иконки. А можно немного напрячься и сделать её анимированной и на чистом CSS. Для пользователя будет очень занимательно наблюдать, как иконка модифицируется и анимируется после нажатия, превращаясь в крестик.

Всё это делается при помощи простых свойств CSS и двух псевдо-селекторов :after и :before.

Ниже приводим исходный код, в котором приводится пример, как сделать иконку меню анимированную в крестик на CSS.

Иконка меню анимированная в крестик на CSS

See the Pen Gxgqvz by Evgeniy Kozachenko (@ekwoster) on CodePen.

Понравилась или помогла статья?
Купите мне кофеКупите мне кофе