主页 / 问题 / 1417722
Accepted
TinturSoft
Asked:2022-08-07 13:08:03 +0000 UTC2022-08-07 13:08:03 +0000 UTC

悬停动画不起作用

  • 772

鉴赏家！问题是我不明白为什么悬停动画不起作用，似乎我做的一切都是正确的

.vse_templates a {
    display: flex;
    width: 200px;
    color: #222;
}
.vse_templates svg {
    transform: rotate(180deg);
    margin-right: 10px;
    margin-top: 5px;
}
.prev-arrow:hover svg {
    animation: bounceleft 0.3s alternate ease infinite;
}
<div class="vse_templates next_templates_svg prev-arrow">
  <a href="/shop/">
    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="16" viewBox="0 0 40 16" fill="none">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M37.3638 6.89841L32.1121 1.45455L33.5153 0L39.1282 5.81818C39.6821 6.39242 39.9725 7.13905 39.9981 7.89062C40.0262 8.71442 39.7363 9.55148 39.1282 10.1818L33.5153 16L32.1121 14.5455L37.5048 8.95545H0V6.89841H37.3638Z" fill="#000"></path>
    </svg><span></span>Смотреть все</a>
</div>

html

1 个回答

  1. Best Answer

    也许这就是你想要的？

    .vse_templates a {
  display: flex;
  width: 200px;
  color: #222;
}

.vse_templates svg {
  transform: rotate(180deg);
  margin-right: 10px;
  margin-top: 5px;
}

.prev-arrow:hover svg {
  animation: bounceleft 0.3s alternate ease infinite;
}

@keyframes bounceleft {
  to {
    transform: translateX(-5px) rotate(180deg);
  }
}
    <div class="vse_templates next_templates_svg prev-arrow">
  <a href="/shop/">
    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="16" viewBox="0 0 40 16" fill="none">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M37.3638 6.89841L32.1121 1.45455L33.5153 0L39.1282 5.81818C39.6821 6.39242 39.9725 7.13905 39.9981 7.89062C40.0262 8.71442 39.7363 9.55148 39.1282 10.1818L33.5153 16L32.1121 14.5455L37.5048 8.95545H0V6.89841H37.3638Z" fill="#000"></path>
    </svg><span></span>Смотреть все</a>
</div>

    • 1

相关问题