#首页导航栏 ul li a {
  display: inline-block; /* 将链接设置为内联块元素，使其可以设置宽度和高度 */
  transition: all 0.2s ease-in; /* 设置所有属性的过渡效果，持续 0.2 秒，缓动效果为 ease-in */
  position: relative; /* 设置相对定位，为伪元素的绝对定位提供参考 */
  overflow: hidden; /* 隐藏超出部分，防止伪元素溢出 */
  z-index: 1; /* 设置堆叠顺序，确保链接内容在伪元素之上 */
  color: #ffffff; /* 设置文字颜色为白色 */
  padding: 0.5em 1em; /* 减小内边距：上下 0.5em，左右 1em */
  cursor: pointer; /* 设置鼠标悬停时为指针样式 */
  font-size: 14px; /* 减小字体大小为 14px */
  border-radius: 0.3em; /* 减小圆角边框半径 */
}

#首页导航栏 ul li a:active {
  color: #666; /* 设置链接被点击时的文字颜色为灰色 */
  box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff; /* 设置内阴影效果，模拟按下状态 */
}

#首页导航栏 ul li a:before {
  content: ""; /* 伪元素必须设置 content */
  position: absolute; /* 设置绝对定位，相对于链接元素 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%) scaleY(1) scaleX(1.25); /* 水平居中并缩放 */
  top: 100%; /* 初始位置在链接底部 */
  width: 130%; /* 减小宽度为链接宽度的 120% */
  height: 160%; /* 减小高度为链接高度的 150% */
  background-color: rgba(0, 0, 0, 0.05); /* 设置背景颜色为半透明黑色 */
  border-radius: 50%; /* 设置为圆形 */
  display: block; /* 设置为块元素 */
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1); /* 设置过渡效果，持续 0.5 秒，延迟 0.1 秒，使用贝塞尔曲线 */
  z-index: -1; /* 设置堆叠顺序，确保伪元素在链接内容之下 */
}

#首页导航栏 ul li a:after {
  content: ""; /* 伪元素必须设置 content */
  position: absolute; /* 设置绝对定位，相对于链接元素 */
  left: 55%; /* 水平偏移 55% */
  transform: translateX(-50%) scaleY(1) scaleX(1.45); /* 水平居中并缩放 */
  top: 120%; /* 初始位置在链接底部 */
  width: 140%; /* 减小宽度为链接宽度的 140% */
  height: 160%; /* 减小高度为链接高度的 160% */
  background-color: #009087; /* 设置背景颜色为青色 */
  border-radius: 60%; /* 设置为圆形 */
  display: block; /* 设置为块元素 */
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1); /* 设置过渡效果，持续 0.5 秒，延迟 0.1 秒，使用贝塞尔曲线 */
  z-index: -1; /* 设置堆叠顺序，确保伪元素在链接内容之下 */
}

#首页导航栏 ul li a:hover {
  color: #000000; /* 设置鼠标悬停时的文字颜色为白色 */
  border: 1px solid #009087; /* 设置边框为 1px 实线，颜色为青色 */
}

#首页导航栏 ul li a:hover:before {
  top: -25%; /* 鼠标悬停时，伪元素向上移动 */
  background-color: #009087; /* 设置背景颜色为青色 */
  transform: translateX(-50%) scaleY(1.2) scaleX(0.8); /* 缩放并调整位置 */
}

#首页导航栏 ul li a:hover:after {
  top: -35%; /* 鼠标悬停时，伪元素向上移动 */
  background-color: #1fb3bb; /* 设置背景颜色为浅青色 */
  transform: translateX(-50%) scaleY(1.2) scaleX(0.8); /* 缩放并调整位置 */
}