html - 悬停时的图标动画

Question

当我将选项悬停在它们之上时，我希望导航栏上的箭头产生我创建的动画，

当我的鼠标悬停在“联系人”、“注册”或“登录”上时，它们下面的箭头应该向下移动，表明它们是下拉按钮，我该怎么做？我已经有了动画代码，但我不知道如何将此代码与我的按钮同步，我将不胜感激。这是代码:

#arrow1 {
  position: absolute;
  top: 11%;
  left: 83.5%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 100px;
  text-align: center;
  line-height: 110px;
  color: white;
  font-size: 30px;
  overflow: hidden;
  color: yellow;
}

#arrow1 {
  margin: 0;
  padding: 0;
  animation: animate 1s;
  right: 0;
  pointer-events: none;
}

@keyframes animate {
  50% {
    transform: translateX(-8px);
    margin-top: -35px;
  }
}

#arrow2 {
  position: absolute;
  top: 11%;
  left: 66%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 100px;
  text-align: center;
  line-height: 110px;
  color: white;
  font-size: 30px;
  overflow: hidden;
  color: yellow;
}

#arro2 {
  margin: 0;
  padding: 0;
  animation: animate 1s;
  right: 0;
  pointer-events: none;
}

@keyframes animate {
  50% {
    transform: translateX(-8px);
    margin-top: -35px;
  }
}

#arrow3 {
  position: absolute;
  top: 11%;
  left: 48.7%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 100px;
  text-align: center;
  line-height: 110px;
  color: white;
  font-size: 30px;
  overflow: hidden;
  color: yellow;
}

#arrow3 {
  margin: 0;
  padding: 0;
  animation: animate 1s;
  right: 0;
  pointer-events: none;
}

@keyframes animate {
  50% {
    transform: translateX(-8px);
    margin-top: -35px;
  }
}

<ul>
  <li id="inicio"><a href="#">INICIO</a></li>
  <li id="contacto"><a href="#">CONTACTO</a></li>
  <li id="registrate"><a href="#">REGISTRATE</a></li>
  <li id="ingresar"><a href="#">INGRESAR</a></li>
  <div class="circle">
    <i class="fas fa-angle-down" id="arrow1"></i>
    <i class="fas fa-angle-down" id="arrow2"></i>
    <i class="fas fa-angle-down" id="arrow3"></i>
  </div>
</ul>

Answer 1

由于您已将动画分配给每个箭头 ID，因此该动画会在页面加载时播放。

要让动画仅在光标悬停在元素上时播放，您需要向每个箭头添加一个 :hover 伪类，并在该 block 内添加动画。

#arrow1:hover {
  animation: animate 1s;
}

完成后，你应该有这样的东西:

#container {
  width: 100%;
  height: 80px;
  background: #151515;
}

#container,
.navItem {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  transform: translateZ(0);
}

.navItem {
  cursor: pointer;
}

.navItem:hover .arrow {
  animation: animate 1s;
}

.navText {
  font-family: 'Arial', sans-serif;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.arrow {
  position: absolute;
  color: #ffff4c;
  bottom: -15px;
}

@keyframes animate {
  50% {
    transform: translateY(8px);
    margin-top: -35px;
  }
}

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div id="container">
  <div class="navItem">
    <div class="navText">
      Contacto
    </div>
    <i class="fas fa-angle-down arrow"></i>
  </div>
</div>

您可能会注意到，我还为该示例编辑了 HTML 和 CSS，但思路是一样的。这引出了我的下一个观点，以及一些可能对您有所帮助的事情。

类

使用 ID 是编写标记和使用 CSS 设置样式的一种完全可以接受的方式；然而，使用 id 而不是 class 可能很麻烦。由于你有多个箭头，我建议使用类而不是 ID。

因此，您的所有箭头都将被分配一个类。在我的示例中，我使用了一个简单的 .arrow 类。这是正确的 CSS 样式。 ID 是唯一的，只应谨慎使用，通常在文档中只使用一次。类被重用。

我还应该指出，这纯粹是语法问题。如果您需要，CSS 将以类似方式处理 ID 和类。

过渡

您可能还注意到，如果您将鼠标悬停在远离 navItem 的地方，我示例中的动画就会停止。如果在元素上使用 :hover 伪类，这是预期的行为。解决方法是用动画代替过渡。

过渡是将动画属性应用到元素的另一种方式。他们将在伪类上设置“前进”和“后退”动画，例如 :hover 和 :focus。

下面是用过渡代替动画的示例。

#container {
  width: 100%;
  height: 80px;
  background: #151515;
}

#container,
.navItem {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  transform: translateZ(0);
}

.navItem {
  cursor: pointer;
}

.navItem:hover .arrow {
  transform: translateY(8px);
}

.navText {
  font-family: 'Arial', sans-serif;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.arrow {
  position: absolute;
  color: #ffff4c;
  bottom: -15px;
  transition: all 1s;
}

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div id="container">
  <div class="navItem">
    <div class="navText">
      Contacto
    </div>
    <i class="fas fa-angle-down arrow"></i>
  </div>
</div>

因此，当您将鼠标悬停在菜单上时，这会让您的交互更加顺畅。

伪元素

最后，我想谈谈将伪元素用于图标之类的东西。它们对于向父元素添加额外的子元素很有用，而不会影响您的书面标记。

我们可以用伪元素替换箭头来清理我们的 HTML，并创建一个更易于管理的工作区。这里还是那个例子，但是使用伪元素代替箭头的 HTML。

#container {
  width: 100%;
  height: 80px;
  background: #151515;
}

#container,
.navItem {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  transform: translateZ(0);
}

.navItem {
  cursor: pointer;
}

.navItem:hover .navText::after {
  transform: translateY(8px);
}

.navText {
  font-family: 'Arial', sans-serif;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.navText::after {
  content: "\f107";
  font-family: 'FontAwesome';
  color: #FFFF00;
  position: absolute;
  transition: all 1s;
}

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div id="container">
  <div class="navItem">
    <div class="navText">
      Contacto
    </div>
  </div>
</div>

结论

如果您有任何其他问题，我很乐意回答并深入探讨。

我还通过 Codepen 为您提供最后一个示例: https://codepen.io/jeffheral/pen/NYKbZq

HTML 标签可能不是您想要的，但您可以随意更改它们。重要的是我们有可靠的 ID 和类设置。如果你想添加更多的导航项，你只需要在你的文档中添加更多的 HTML。