关于 transfrom-origin 的下划线特效

妙用 scale 与 transfrom-origin，精准控制动画方向，实现下划线特效

transform: scale() 实现线条运动

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

我们可以使用 transform: scaleX(0) 与 transform: scaleX(1) 来改变线条的显示与隐藏。

transform-origin 实现线条运动方向

transform-origin 让我们可以更改一个元素变形（transform）的原点，transform-origin 属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。 没有明确定义的偏移将重置为其对应的初始值。

效果一: 从中间向两边展开

Hover Me

<div class='con'><div>Hover Me</div></div>

.con
  width 100%
  height 100px
  position: relative;
  div
    position: absolute;
    width: 200px;
    height: 60px;
    line-height: 60px;
    font-size: 32px;
    cursor: pointer;
    color: #333;
    text-align: center;
    transition: color .5s;
    margin: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    &::before
      content: "";
      position: absolute;
      left: 0%;
      bottom: 0;
      width: 200px;
      transform: scaleX(0);
      height: 2px;
      background: deeppink;
      z-index: -1;
      transition: all .5s;
    &:hover::before
      transform: scaleX(1);

效果二: 左进右出

Hover Me

本效果最最最重要的地方就在于这里，我们使用 transform-origin 去改变 transform: scale() 的原点实现线条运动的方向。

我们给线条设置一个默认的 transform-origin 记为状态1

hover 的时候，设置另外一个不同的 transform-origin, 记为状态2

所以，当然我们 hover 的时候，会读取状态2的 transform-origin，从该原点开始放大至 scaleX(1)，hover 离开的时候，会读取状态1的 transform-origin，从 scaleX(1) 状态缩小至该原点。

因此

.con
  width 100%
  height 100px
  position: relative;
  div
    position: absolute;
    width: 200px;
    height: 60px;
    line-height: 60px;
    font-size: 32px;
    cursor: pointer;
    color: #333;
    text-align: center;
    transition: color .5s;
    margin: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    &::before
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 200px;
      transform: scaleX(0);
      height: 2px;
      background: deeppink;
      z-index: -1;
      transition: transform .5s;
      transform-origin: 100% 0;
    &:hover::before
        transform: scaleX(1);
        transform-origin: 0 0;

参考资料

• 妙用 scale 与 transfrom-origin，精准控制动画方向
• 妙用 scale 与 transfrom-origin，精准控制动画方向