仿B站个人主页菜单鼠标悬停特效仿B站个人主页菜单鼠标悬停特效，建议使用 **Chrome** 浏览器，体验最佳效果。仿B

仿B站个人主页菜单鼠标悬停特效

建议使用 Chrome 浏览器，体验最佳效果。

1.效果展示

动画.gif

2.HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" />
  <title>B站个人主页菜单鼠标悬停特效</title>
  <!-- 按钮样式 -->
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --hue: 40;
      --step: 40;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #454647;
    }

    ul {
      display: flex;
      /* 如果要水平排列,屏蔽掉下边这行 */
      /* flex-direction: column; */
      align-items: start;
      list-style-type: none;
    }

    ul li {
      padding: 6px 0;
      margin: 0 16px;
    }

    ul li a {
      position: relative;
      display: block;
      padding: 4px 0;
      font-size: 24px;
      color: #eeeeee;
      text-decoration: none;
      text-transform: uppercase;
      transition: 0.5s;
    }

    ul li a::after {
      position: absolute;
      content: '';
      top: 100%;
      left: 0;
      width: 100%;
      height: 3px;
      background: oklch(80% 80% calc(var(--hue) + var(--step) * var(--i)));
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.5s;
    }

    ul li a:hover {
      color: #aaaaaa;
    }

    ul li a:hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    ul li a i {
      font-size: 18px;
      margin-right: 12px;
      color: oklch(80% 80% calc(var(--hue) + var(--step) * var(--i)));
    }
  </style>
</head>

<body>
  <ul>
    <li style="--i: 0">
      <a href="#">
        <i class="fa-solid fa-house"></i>主页
      </a>
    </li>
    <li style="--i: 1">
      <a href="#">
        <i class="fa-solid fa-camera-retro"></i>动态
      </a>
    </li>
    <li style="--i: 2">
      <a href="#">
        <i class="fa-solid fa-pen-nib"></i>投稿
      </a>
    </li>
    <li style="--i: 3">
      <a href="#">
        <i class="fa-solid fa-youtube"></i>合集和列表
      </a>
    </li>
    <li style="--i: 4">
      <a href="#">
        <i class="fa-solid fa-star"></i>收藏
      </a>
    </li>
    <li style="--i: 5">
      <a href="#">
        <i class="fa-solid fa-heart"></i>追番追剧
      </a>
    </li>
    <li style="--i: 6">
      <a href="#">
        <i class="fa-solid fa-gear"></i>设置
      </a>
    </li>
  </ul>
</body>

</html>

3.码上掘金效果展示

4.如何运行

1.新建一个txt文本文件，将代码复制进去。
2.将txt文本重命名为index.html的HTML文件。
3.使用任何现代浏览器打开index.html文件。