悬停时的图标动画

Question

我想在导航栏上的箭头上生成我在我们将选项悬停在其上时创建的动画

当我的鼠标悬停＆＃34;联系＆＃34;，＆＃34;注册＆＃34;或者＆＃34;登录＆＃34;，它们下面的箭头应该向下移动，表明它们是下拉按钮，我该怎么做？我已经有了动画的代码，但我不知道如何将此代码与我的按钮同步，我将不胜感激任何帮助。这是代码：

＆＃13;

＆＃13;

#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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

当光标悬停在元素上时，要让动画只播放 ，您需要在每个箭头中添加一个：hover伪类，并在该块中添加动画。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

完成后，你应该有这样的事情：

＆＃13;

＆＃13;

#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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您可能会注意到我也为该示例编辑了HTML和CSS，但想法是一样的。这让我想到了下一点，以及可能对你有用的东西。

类

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

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

我还应该注意，这纯粹是一种语法上的东西。如果您需要，CSS会同样对待ID和类。

转换

您可能还注意到，如果您将鼠标悬停在navItem之外，我的示例中的动画就会停止。如果在元素上使用：hover伪类，则这是预期的行为。解决方法是将动画替换为转换。

过渡是将动画属性应用于元素的另一种方法。他们将动画“转发”＃39;并且＆＃39;落后＆＃39;比方说，像:hover和:focus这样的伪类。

以下是转换代替动画时的示例。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

伪元素

最后，我想谈谈使用Pseudo Elements等图标之类的东西。它们对于向父元素添加其他子元素非常有用，而不会影响您的书面标记。

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

结论

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

我还通过Codepen向您介绍了最后一个示例： https://codepen.io/jeffheral/pen/NYKbZq

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

Answer 2

您可以使用更通用的解决方案，而不是单独定位每个箭头：

.menu {
  display: flex;
  list-style: none;
  background-color: #444;
}
.menu li {
  padding: 10px 15px;
  cursor: pointer;
  padding-bottom: 20px;
  position: relative;
  margin: 5px;
  color: white;
  font-weight: bold;
  font-family: sans-serif;
}
.menu li:after {
  font-family: FontAwesome;
  font-size: 20px;
  font-weight: bold;
  content: '\f107';
  display: inline-block;
  color: yellow;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  transition: transform 0.3s ease;
}
.menu li:hover {
  background-color: rgba(0, 0, 0, 0.25);
}
.menu li:hover:after {
  transform: translate(-50%, 5px);
}

<ul class="menu">
  <li>INICIO</li>
  <li>CONTACTO</li>
  <li>REGISTRATE</li>
  <li>INGRESAR</li>
</ul>