时间戳

首页 > 解决方案 > 链接悬停上的动画图标

html - 链接悬停上的动画图标

问题描述

我正在尝试实现图标在文本链接悬停时略微向右移动的动画效果。目前，如果直接指向图标，它将显示它的动画，但我想知道是否有办法连接这两者（文本和图标）。

请考虑以下代码：

li {
  list-style-type: none;
}

i {
  padding-left: 10px;
}

.space {
  padding: 5px;
}

.moving-left i {
  position: relative;
  transition: transform 0.3s ease;
  transform: translateX(0px);
}

.moving-left i:hover {
 transform: translateX(10px);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">

<div>
  <ul>
    <li class="space moving-left"><a href="#">Link 1<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 2<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 3<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 4<i class="fas fa-chevron-right"></i></a></li>
  </ul>
</div>

标签： htmlcss

解决方案

试试下面的代码。只需移动到您就可以告诉 css在悬停类后.moving-left:hover i执行特定操作。i你几乎拥有它。

希望这可以帮助！

li {
  list-style-type: none;
}

i {
  padding-left: 10px;
}

.space {
  padding: 5px;
}

.moving-left i {
  position: relative;
  transition: transform 0.3s ease;
  transform: translateX(0px);
}

.moving-left:hover i {
 transform: translateX(10px);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">

<div>
  <ul>
    <li class="space moving-left"><a href="#">Link 1<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 2<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 3<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 4<i class="fas fa-chevron-right"></i></a></li>
  </ul>
</div>

推荐阅读