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

举报
搞前端的半夏 发表于 2021/12/21 15:43:00 2021/12/21
【摘要】 大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 关注公众号:半夏话前端,了解更多前端知识!点我探索新世界! 前言关于button的,无论是样式还是动画,各路大神都在分享这自己的创意,而在button动画中,边框滚动的效果,我觉得是最好的。虽说是button的动画,其实这种动画效果,不仅仅局限在button上。在边框滚动动画上,主要是有下面三种, ...

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 关注公众号:半夏话前端,了解更多前端知识!点我探索新世界!

前言

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

前提

这三种边框滚动动画,

  1. 本人都是利用伪元素::after和::before实现的,当然也可以不用伪元素,套一层div, 不过我个人觉得比较复杂,考虑的也比较多。

  2. 这里button的边框不是利用border实现的,而是利用box-shadow实现的,因为在保证button和:after/before创建的,可以和按钮宽高保持一致。如果使用border的话,不小心的话,滚动的边框就会在在里面。类似这种:

    image-20211121204318106

border: 0;
box-shadow: inset 0 0 0 2px #409EFF;

image-20211121202645660

单边

button

效果如上,当鼠标放在button,会从一个角出发,经过一圈,最终回到出发角。这里动画正好是一个圈,正好用到了after和before。看上去可能有点难,但其实很简单:这里其实只要控制after的宽度和高度从0到100到100%就可以了呀。

初始状态:after和before都是宽高为0的,并且border是透明的,

  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;
}

双边

button1

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

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

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;
}

四边扩散

button31.gif

乍一看,挺麻烦,四条边都是从中点往两边扩散,首先我们针对这个中间会想到的是 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;
}

button411.gif
完整代码

image.png

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。