如何获取网页中该动态运动效果的实现指引？疑似Hover效果

这个效果可以通过纯CSS实现，核心是利用伪元素和CSS过渡动画，具体步骤如下：

• 基础结构搭建
  先写出基础的HTML导航结构，比如：

  <nav>
    <a href="#" class="nav-link">首页</a>
    <a href="#" class="nav-link">产品</a>
    <a href="#" class="nav-link">关于我们</a>
  </nav>
  

• CSS样式设置

  1. 给导航链接设置基础样式，去掉默认下划线，定义字体、颜色、内边距等：

     .nav-link {
       position: relative;
       text-decoration: none;
       color: #333;
       padding: 8px 0;
       font-size: 16px;
       display: inline-block;
     }
     

  2. 用:after伪元素创建下划线的初始状态，设置宽度为0、位置居中、指定hover时的线条颜色：

     .nav-link:after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 50%;
       width: 0;
       height: 2px;
       background-color: #007bff;
       transition: all 0.3s ease;
       transform: translateX(-50%);
     }
     

  3. 添加hover状态，让下划线宽度扩展为100%，同时改变文字颜色：

     .nav-link:hover {
       color: #007bff;
     }
     .nav-link:hover:after {
       width: 100%;
     }
     

• 效果调整说明
  如果需要修改动画快慢，调整transition属性里的0.3s数值即可；要是想更换线条或文字颜色，直接修改对应的颜色值就行。

内容的提问来源于stack exchange，提问作者Bijutoha