按钮边框滚动动画的实现原理

实现简介

关于button的，无论是样式还是动画，各路大神都在分享这自己的创意，而在button动画中，边框滚动的效果，我觉得是最好的。虽说是button的动画，其实这种动画效果，不仅仅局限在button上。在边框滚动动画上，主要是有下面三种：

• 单边
• 双边
• 四边扩散

这三种边框滚动动画，

  button::before,
  button::after {
      box-sizing: inherit;
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border: 2px solid transparent;
}

button::before {
top: 0;
left: 0;
}
button::after {
bottom: 0;
right: 0;
}

button:hover::before,
button:hover::after {
width: 100%;
height: 100%;
}
button:hover::before {
border-top-color: #60daaa;
border-right-color: #60daaa;
transition: width 0.25s , height 0.25s  0.25s;
}
button:hover::after {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
transition: border-color 0s  0.5s, width 0.25s  0.5s,
height 0.25s  0.75s;
}

双边

这个动画算是上一个动画的升级版，不过我觉得从代码层面更简单了。

我们只需要更改两个地方,将两者的定位统一：

可以先来看一下实现后的效果，点击查看。

button::after,
button::before 
{
   top: 0;
   left: 0;
}

将下面的动画更改，先增高度再曾宽度。

button:hover::after {
   border-bottom-color: #60daaa;
   border-left-color: #60daaa;
   transition: height 0.25s , width 0.25s 0.25s;
}

四边扩散

乍一看，挺麻烦，四条边都是从中点往两边扩散，首先我们针对这个中间会想到的是 transform-origin: center;，这个属性可以改变元素的位置，那么此时在解决另一个问题，往两边扩散，我一开始想到的是width从0到100%，但是这个 transform-origin: center;好像没法用了。我依稀记得再加上一个属性，可以生效，但是我就是记不起来了！于是我转到了另一个属性scale*，只要我一开始设置为0，后面设置为1 不就可以了。

可以先来看一下实现后的效果，点击查看。

我分解上边和下面，效果如下：

button::before {
        border-top: 2px solid #60daaa;
        border-bottom: 2px solid #60daaa;
        transform: scale3d(0, 1, 1);
}
button:hover::before {
    transform: scale3d(1, 1, 1);
    transition: transform 0.5s;
}