master

分支 (1)

管理

管理

master

base_knowledge
/
underline_animate.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    .testStyle{
      position:relative;
      text-align: center;
      width: 8%;       /*控制字体下划线的长度*/
    }
    .testStyle::after{
      content:'';
      display:block;
      /*开始时候下划线的宽度为100%*/
      width:100%;
      height:3px;
      position:absolute;
      bottom:-10px;
      background:#000;
      transition:all 0.3s ease-in-out;
      /*通过transform的缩放scale来让初始时x轴为0*/
      transform: scale3d(0,1,1);
      /*将坐标原点移到元素的中间，以原点为中心进行缩放*/
      transform-origin:50% 0;
    }
    .testStyle:hover::after{
      /*鼠标经过时还原到正常比例*/
      transform:scale3d(1,1,1);
    }
  </style>
</head>
<body>
<div>
  <h1 class="testStyle">测试文字</h1>
</div>
</body>
</html>