หนังโป๊ chanel preston in look at me closer. free sex एक्स एक्स एक्स

Анимированная иконка «Гамбургер» на CSS

CSS

Вы можете воспользоваться Font Awesome  или взять изображение, чтобы создать данную иконку, но это не обязательно. Вместо этого вы можете создать «гамбургер» только с помощью CSS и следующей разметки.

 

 

В следующих CSS стилях с помощью  span  мы создадим серединку «гамбургера»  и используем  псевдо-элементы  для создания булочек.

 

Разметка и   стили представлены в CodePen. Пока ничего особенного, просто значок «гамбургера». Перейдем в следующий раздел, посвященный анимации.

See the Pen YGLEjO by Ruslan (@rkaliev) on CodePen.0

Анимирование иконки «гамбургер»

Теперь трансформируем нашу иконку в  форму X , таким образом  пользователю будет ясно, что, щелкнув по ней еще раз, меню закроется. В CSS мы используем transition и transform, чтобы перевернуть псевдо-элементы и скрыть среднюю плитку  для  создания нашей формы Примечание:  Я использую transition и transform, которые поддерживаются в IE10 + и других браузерах. Если вы хотите поддержку старых браузеров  IE, то вы можете использовать запасной вариант JQuery или другие решения JavaScript .

 

Примечание: CodePen использует -prefix-free,  автоматически добавляя необходимые префиксы.

Для того чтобы анимировать иконку мы воспользуемся JavaScript чтобы переключать  класс гамбургера когда пользователь на него нажимает.

Примечание:  classList c ограниченной поддержкой ( IE10 + и другие браузеры ) . Вы можете использовать jQuery snippet или воспользоваться полифилом  HTML5 Please. Ниже приведен пример  «гамбургера»  вместе с  анимацией. Вам нужно нажать на гамбургер, чтобы вызвать анимацию.

See the Pen XjqzPg by Ruslan (@rkaliev) on CodePen.0

 Надеюсь,  вам понравился  этот краткий обзор с псевдо-элементами и анимацией. Я не стал вдаваться в подробности, как именно все вместе организовано. Для того чтобы узнать глубже эти понятия  вы можете посмотреть следующие ресурсы :

  1.  CSS3 Transitions, Transforms, Animation, Filters and more! by Rich Bradshaw (@richbradshaw)  (http://css3.bradshawenterprises.com/)

2.   Video Screencasts — #94: Intro to Pseudo Elements by Chris Coyier (@chriscoyier) (https://css-tricks.com/video-screencasts/94-intro-to-pseudo-elements/)

 

 

Источник: elijahmanor.com

Оцените статью
Добавить комментарий