анимация при наведении для навигации - PullRequest
Новая
       17

анимация при наведении для навигации

0 голосов
/ 06 февраля 2019

Мне нравится анимация на панели навигации для этого сайта, но я не могу найти код.Может кто-нибудь помочь ??

https://mikelevin.org/

Ниже приведен мой HTML-код для навигации, я хочу создать CSS для Nav, как указано выше. 

<nav id="menu" role="navigation">
  <ul id="topnav" class="topnav desktop-nav">
    <li class="active">
      <a href="/" class="inout">About</a>
    </li>
    <li >
      <a href="/join" class="inout">Join</a>
    </li>
    <li >
      <a href="/volunteer" class="inout">Volunteer</a>
    </li>
    <li >
      <a href="/contact" class="inout">Contact</a>
    </li>
  </ul>
</nav>

The *У класса 1009 * еще ничего не определено, я просто решил, что назову класс анимации

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

Просто посмотрите на элемент <a>, у него есть псевдоэлемент :before.

Предыдущий находится в положении absolute относительно его родителя, <a>, с этими настройками,он принимает 100% ширину и высоту своего родителя: 

top: 0;
right: 0;
bottom: 0;
left: 0;

Затем посмотрите на свойства преобразования: 

transform: scaleX(0);
transform-origin: 50%;

Это похоже на установку ширины на «0» с преобразованием.

Я не смотрел на CSS при наведении на <a>, но я почти уверен, что это что-то вроде этого (для псевдоэлемента): 

transform: scaleX(1);

Тот просто оживит элемент от 0 до 100% его первоначального размера.

0 голосов
/ 07 февраля 2019

Используя инструменты разработчика Chrome (щелкните правой кнопкой мыши элемент> осмотреть), вы можете проверить одно из правил CSS элементов навигации.Например, я посмотрел на <li> с текстом «Пожертвовать».На панели стилей вы заметите, что вы можете переключать состояние элемента, то есть вы можете вручную переключать состояние наведения (см. Скриншот ниже):

screenshot of style pane

На что я вижу следующее css: 

#main-navigation ul.nav>li {
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    visibility: visible;

Кроме того, если вы посмотрите на панель элементов для дочернего элемента <a> под этим <li>, вы заметите, что он расширяется.Как видите, есть псевдоэлемент, обозначенный ::before: screenshot of elements pane

Нажмите на этот ::before на панели элементов, и вы сможете вызвать его cssproperties: 

.navbar .navbar-nav>li:not(.btn):hover a:before, 
.navbar .navbar-nav>li:not(.btn):hover .hestia-toggle-search:before {
    color: inherit;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);

Существует немного больше CSS, который применяется к элементу ::before для его состояния отсутствия наведения, но я оставлю вас поэкспериментировать с DevTools, чтобы выяснить это:)

...