Блог

Итак, недавно я пытался создать заголовок, в котором я использовал свойство CSS flex для выравнивания элементов.

Проблема возникла, когда я попытался сделать несколько анимаций…

Вот что произошло, когда я использовал прямое дочернее свойство flex, т. Е. В flexbox я использовал content-left,center,right для выравнивания элементов.

видеосвязь (в которой перевод происходит в элементе login) — https://drive.google.com/file/d/1TrBrW4KoI43SH0IJj5AQYiq2qNWFqcwv/view

мой код (ы) для него…

 HTML


<header className='second-header'>
  <a href='/tours' className='second-header__content--left'>
    All Tours
  </a>

  <img
    src='images/logo-white.png'
    alt='Logo'
    className='second-header__content--center'
  />
  <a href='/' className='second-header__content--right'>
    Log In
  </a></header>


CSS
    .second-header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: $color-grey-dark;
    font-size: 1.4rem;
    font-weight: 300;
    text-transform: uppercase;
    a {
        text-decoration: none;
        color: $color-grey-light-2;
        margin: 0 3rem;
    }
    img {
        height: 3rem;
        width: 6rem;
    }
        amp;__content--left,
        amp;__content--right {
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
            -moz-transition: all 0.2s;
            -ms-transition: all 0.2s;
            -o-transition: all 0.2s;
            amp;:hover,
            amp;:active {
                text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 1);
                transform: translateY(-.25rem);
                -webkit-transform: translateY(-.25rem);
                -moz-transform: translateY(-.25rem);
                -ms-transform: translateY(-.25rem);
                -o-transform: translateY(-.25rem);
            }
        }
    }
}
  

Теперь это то, что происходит, когда я добавляю другой элемент в содержимое, правильно, перевод не работает

ссылка на видео — https://drive.google.com/file/d/1wvTGNCe98qbAb1-aZQZofTar0ow84Ci_/view

мой код (ы) для того же

HTML

 <header className='second-header'>
  <a href='/tours' className='second-header__content--left'>
    All Tours
  </a>

  <img
    src='images/logo-white.png'
    alt='Logo'
    className='second-header__content--center'
  />
  <section className='second-header__content--right'>
    <a href='/' className='second-header__content--right-login'>
      Log In
    </a>
    <button className='second-header__content--right-signup'>
      Sign Up
    </button>
  </section>
</header>
  

CSS

     .second-header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: $color-grey-dark;
    font-size: 1.4rem;
    font-weight: 300;
    text-transform: uppercase;
    a {
        text-decoration: none;
        color: $color-grey-light-2;
        margin: 0 3rem;
    }
    img {
        height: 3rem;
        width: 6rem;
    }
    amp;__content--left,
    amp;__content--right-login {
        transition: all 0.2s;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        amp;:hover,
        amp;:active {
            text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 1);
            transform: translateY(-.25rem);
            -webkit-transform: translateY(-.25rem);
            -moz-transform: translateY(-.25rem);
            -ms-transform: translateY(-.25rem);
            -o-transform: translateY(-.25rem);
        }
    }
    amp;__content--right {
        button {
            text-decoration: none;
            background-color: $color-grey-dark;
            padding: 1rem 2rem;
            border: 1px solid $color-grey-light-2;
            border-radius: 100px;
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            -ms-border-radius: 100px;
            -o-border-radius: 100px;
            color: $color-grey-light-2;
            text-transform: uppercase;
            font-family: Lato;
            font-size: 1.4rem;
            font-weight: 300;
            amp;:hover,
            amp;:active {
                cursor: pointer;
                color: $color-grey-dark;
                background-color: $color-white;
            }
        }
    }
}
  

Как вы все можете видеть во второй части, никакого преобразования не происходит (применяется только текстовая тень), и я действительно хотел бы знать, является ли причиной проблемы моя архитектура кода или что-то еще. Если вы нашли мои коды слишком длинными, пожалуйста, проверьте мою архитектуру и элементы content-right, content-right-login. Заранее благодарю добрую душу за то, что она дала мне исправление для этого.