在移动互联网时代，用户体验变得至关重要。一个直观、响应灵敏的底部导航不仅能够提升用户的便捷性，还能增强吸引力。CSS动画效果为底部导航增添了活力，使得用户在操作过程中享受丰富和流畅的交互体验。本文将探讨如何利用CSS动画，为移动端底部导航创建吸引人的鼠标经过效果，从而提升用户界面的现代感和互动性。

先上效果：

完整代码：

<div class="navbar">
        <li class="list-item"><i class="fa-solid fa-house"></i>
            <span class="list-item-name">Home</span>
        </li>
        <li class="list-item">
            <i class="fa-solid fa-user"></i>
            <span class="list-item-name">Profile</span>
        </li>
        <li class="list-item">
            <i class="fa-solid fa-gear"></i>
            <span class="list-item-name">Settings</span>
        </li>
        <li class="list-item">
            <i class="fa-solid fa-bag-shopping"></i>
            <span class="list-item-name">Bag</span>
        </li>
    </div>

CSS完整代码：

@import url("https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css");
:root {
  --highlight: #5756e6;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #a4b1e6;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "Inter", sans-serif;
}

.navbar {
  border-radius: 32px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 14px 28px #8f9cd4, 0 10px 10px #8f9cd4;
}

.list-item {
  list-style-type: none;
  flex-basis: 100%;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #555;
  transform: translateY(0);
  transition: transform 0.5s ease, opacity 0.2s ease;
  cursor: pointer;
}

.list-item-name {
  font-size: 13px;
  font-weight: 500;
  position: absolute;
  transform: translate(0, 50px);
  transition: transform 0.5s ease, opacity 0.2s ease;
  opacity: 0;
}

.list-item:hover {
  color: var(--highlight);
  transform: translateY(-6px);
}
.list-item:hover .list-item-name {
  transform: translateY(20px);
  opacity: 1;
}

@media (max-width: 350px) {
  .navbar {
    flex-direction: column;
    align-items: center;
    max-width: 120px;
    padding-bottom: 20px;
  }

  .list-item {
    flex-basis: auto;
  }

  .list-item:hover .list-item-name {
    transform: translateY(25px);
  }
}

关键技术点如下：

1、导入外部字体和图标库:
通过@import规则，从font-awesomeCDN导入了all.min.css，这将为页面提供Font Awesome图标库。
2、CSS变量:
使用:root伪类定义了一个CSS变量--highlight，值为#5756e6。这可以在整个样式表中重复使用和更新。
3、导航栏样式:
.navbar类定义了导航栏的样式，包括背景颜色、边框半径、弹性盒模型布局、最大宽度以及盒子阴影。
4、鼠标悬停效果:
:hover伪类为列表项和列表项名称提供了鼠标悬停时的动态效果，包括颜色变化、位移和透明度变化。
5、响应式设计:
@media查询用于在屏幕宽度小于350px时改变导航栏的布局和样式，使其适应移动设备的屏幕尺寸。