Невероятная чистая панель навигации CSS, подчеркивающая эффект следования

внешний интерфейс JavaScript CSS
Невероятная чистая панель навигации CSS, подчеркивающая эффект следования

Во-первых, давайте сделаем снимок: как с помощью чистого CSS добиться следующего эффекта?

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

Хорошо, продолжайте. Этот эффект похож на небольшую проблему, с которой я столкнулся в процессе развития бизнеса. На самом деле, даже если я использую Javascript, моя первая реакция — это очень хлопотно. Поэтому мне интересно, можно ли добиться этого эффекта, используя только CSS?

определить требования

Давайте определим простое правило со следующими требованиями:

  • Предположим, что структура HTML выглядит следующим образом:
<ul>
  <li>不可思议的CSS</li>
  <li>导航栏</li>
  <li>光标小下划线跟随</li>
  <li>PURE CSS</li>
  <li>Nav Underline</li>
</ul>
  • Панель навигацииliширина не фиксирована
  • когда с левой стороны навигацииliдвигаться вправоli, подчеркивание перемещается слева направо. Точно так же, когда с правой стороны навигацииliдвигаться влевоli, подчеркивание перемещается справа налево.

Выполнить требование

В первый раз, когда я увидел этот эффект, я подумал, что эту анимацию нельзя сделать с помощью одного лишь CSS.

Если вы хотите сделать это только с помощью CSS, вам нужно найти другой способ и использовать несколько хитрых методов.

Что ж, давайте воспользуемся некоторыми приемами и уловками, чтобы шаг за шагом выполнить этот эффект с помощью CSS. Проанализируйте трудности:

Ширина не фиксирована

Первая трудность,liШирина не фиксирована. Таким образом, нам, возможно, придется начать сliПоднимите шум из-за собственной ширины.

так как каждыйliШирина не обязательна, тогда длину соответствующего ей подчеркивания нужно адаптировать под себя. Естественно, мы подумаем, как его использовать.border-bottom.

li {
    border-bottom: 2px solid #000;
}

Ну может сейчас так (ли соединены между собой, а промежуток между ли используетсяpaddingпроизводить):

image

Скрыть по умолчанию, эффект анимации

Конечно, поначалу здесь нет подчеркиваний, поэтому нам может понадобиться их скрыть.

li {
    border-bottom: 0px solid #000;
}

Свергнуть и начать заново, с помощью псевдоэлементов

Кажется, это не работает, потому что после скрытия наведитеliКогда требуется анимация подчеркивания, иliСамо по себе его точно не сдвинуть. Итак, мы рассматриваем использование псевдоэлементов. применять подчеркивание к каждомуliповерх псевдоэлемента.

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom: 2px solid #000;
}

Рассмотрим анимацию первого шага ниже, при наведении подчеркивание должно расширяться с одной стороны. Итак, используя абсолютное позиционирование, мы будемliШирина псевдоэлемента устанавливается равной 0, а при наведении ширина меняется отwidth: 0 -> width: 100%, CSS выглядит следующим образом:

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
}

li:hover::before {
    width: 100%;
}

Получите, следующий эффект:

navunderline

Двигайтесь слева налево, двигайтесь справа налево

Хорошо, я чувствую, что на шаг ближе к успеху. Теперь остается самый сложный вопрос:

Как сделать так, чтобы линия следовала за движением курсора, чтобы добиться, когда с левой стороны навигацииliдвигаться вправоli, подчеркивание перемещается слева направо. Точно так же, когда с правой стороны навигацииliдвигаться влевоli, подчеркивание перемещается справа налево.

Давайте подробнее рассмотрим текущий эффект:

twounderline

когда с первогоliпереключиться на второйliкогда первыйliНеправильное направление отвода подчеркивания. Итак, может быть, нам нужно сместить начальное положение подчеркивания и установить его наleft: 100%, так что каждый раз, когда подчеркивание убирается, первыйliВ самый раз:

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
}

li:hover::before {
    left: 0;
    width: 100%;
}

Взгляните на эффект:

twounderline11

Что ж, внимательно сравнив две картинки, второй эффект на самом деле состоит в том, что вы собираете семена кунжута и теряете арбуз. Первыйliнаправление верное, но второеliПодчеркивание снова движется в неправильном направлении.

fxxk

Волшебный ~ селектор

Поэтому нам срочно нужен метод, который не меняет текущий ховерliСпособ перемещения подчеркивания может изменить его на следующий.liТо, как движется подчеркивание (хороший поворот).

Правильно, здесь мы можем использовать~Выбор персонажей для выполнения этой сложной миссии также является наиболее важной частью этого примера.

для текущего наведенияli, расположение подчеркивания, соответствующего псевдоэлементу, равноleft: 100%, а дляli:hover ~ li::before, их расположениеleft: 0. Код CSS примерно такой:

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
    transition: 0.2s all linear;
}

li:hover::before {
    width: 100%;
    left: 0;
}

li:hover ~ li::before {
    left: 0;
}

На этом эффект, которого мы хотим, достигнут! Посыпать цветы. Взгляни:

underlineawhere

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

Полную ДЕМО можно найти здесь:Демонстрация CodePen — невероятный CSS-курс, подчеркивающий следующий эффект

Наконец

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

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

Категории