Sass: Как фоновая позиция работает в эффекте наведения при превышении размера фона - PullRequest
Новая
       45

Sass: Как фоновая позиция работает в эффекте наведения при превышении размера фона

1 голос
/ 15 января 2020

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

Эффект можно увидеть здесь: https://codepen.io/logan-lee/pen/YzPjLpj?editors=1100

Я пытаюсь понять, как это работает. Обратите внимание, что внутри ссылки & ___ background-size установлено значение 220%. И когда он находится, фоновое положение его установлено на 100%. 

<nav class="navigation__nav">
  <ul class="navigation__list">
    <li class="navigation__item"><a href="#" class="navigation__link"><span>01</span>About Natous</a></li>
    <li class="navigation__item"><a href="#" class="navigation__link"><span>02</span>Your benfits</a></li>
    <li class="navigation__item"><a href="#" class="navigation__link"><span>03</span>Popular tours</a></li>
    <li class="navigation__item"><a href="#" class="navigation__link"><span>04</span>Stories</a></li>
    <li class="navigation__item"><a href="#" class="navigation__link"><span>05</span>Book now</a></li>
  </ul>
</nav>

body
{
  font-size: 10px;
}

.navigation
{
  &__link {
        &:link,
        &:visited {
            display: inline-block;
            font-size: 3rem;
            font-weight: 300;
            padding: 1rem 2rem;
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            background-image: linear-gradient(120deg, orangered 0%, orangered 50%, #fff 50%);
            background-size: 220%;
            transition: all .4s;

            span {
                margin-right: 1.5rem;
                display: inline-block;
            }
        }

        &:hover,
        &:active {
            background-position: 100%;    // try different values like 100%, 90%, 50%, 10%, 0%.
            color: green;
            transform: translateX(1rem);
        }
    }
}

Это работает очень хорошо. Но мне интересно, как он ведет себя с различными значениями положения фона.

Я нарисовал картинку, чтобы попытаться проиллюстрировать происходящее.

enter image description here

Пожалуйста, откройте изображение в новой вкладке в вашем браузере.

При наведении на элемент:

Как вы можете видеть в позиции по умолчанию, которая составляет 0%, фон элемента оранжево-красный.

При 100% вы можете видеть прозрачный фон (который изображен на рисунке синим цветом).

При уменьшении положения фона со 100% до 90 %, постоянно оранжево-красный увеличивается в размере слева направо.

Когда положение фона составляет 50%, вы можете видеть равную пропорцию красного и прозрачного фона.

Когда положение фона еще больше уменьшается скажем, 10%, вы можете видеть, что большая часть фона оранжево-красная (слева направо), а оставшееся пространство прозрачно.

Я не понимаю, как работает эта позиция фона. Я думаю, что я понимаю, когда он установлен на 0% или 50% или 100%, но не между ними. Заранее спасибо.

...