0

Как сделать чтобы стрелка после наведения еще немного обратно шла? пример тут Или может есть какой-нибудь онлайн генератор? подобных ненашел

    svg {
        width:50px;
  
    }
    .cases-link svg {
      transform: rotate(0deg);
      transition: transform .3s cubic-bezier(0.68, 0.9, 0.265, 2);
      /* transition: transform .4s cubic-bezier(0.68, -0.55, 0.265, 5); */
    }

    .cases-link:hover svg {
      transform: rotate(90deg);
    }
  <a href="#" id="cases" class="cases-link">
        <svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126 126">
          <defs>
            <style>
              .b {
                fill: #000;
              }
            </style>
          </defs>
          <polygon class="b" points="112.65 -.17 0 -.17 0 13.52 103.67 13.52 .65 116.53 10.29 126.17 112.65 23.85 112.65 126.12 126.29 126.12 126.29 13.52 126.29 -.17 112.65 -.17"></polygon>
        </svg>
      </a>

1 ответ 1

0

Надо добавить translation на :hover время маленькое а на сам svg без hover уже увеличить параметр времени

svg {
        width:50px;
  
    }
    .cases-link svg {
      transform: rotate(0deg);
      transition: transform .9s cubic-bezier(0.68, 0.9, 0.265, 2);
      /* transition: transform .4s cubic-bezier(0.68, -0.55, 0.265, 5); */
    }

    .cases-link:hover svg {
      transform: rotate(90deg);
      transition: transform .3s cubic-bezier(0.68, 0.9, 0.265, 2);
    }
<a href="#" id="cases" class="cases-link">
        <svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126 126">
          <defs>
            <style>
              .b {
                fill: #000;
              }
            </style>
          </defs>
          <polygon class="b" points="112.65 -.17 0 -.17 0 13.52 103.67 13.52 .65 116.53 10.29 126.17 112.65 23.85 112.65 126.12 126.29 126.12 126.29 13.52 126.29 -.17 112.65 -.17"></polygon>
        </svg>
      </a>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.