图文详解Clip-path实现按钮流动边框动画

本篇文章给大家带来了关于前端按钮的相关知识，其中主要跟大家聊一聊如何用Clip-path实现按钮流动边框动画，感兴趣的朋友下面一起来看一下吧，希望对大家有帮助。

1.实现效果

图文详解Clip-path实现按钮流动边框动画-LMLPHP

2.实现步骤

添加div标签

<div>苏苏_icon</div>

登录后复制

添加样式

图文详解Clip-path实现按钮流动边框动画-LMLPHP

div {
  position: relative;
  width: 220px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  background: #55557f;
  cursor: pointer;
  border-radius: 10px;
}

登录后复制

为div添加前后伪元素，为了方便区分，设置前后伪元素的边框颜色不同

图文详解Clip-path实现按钮流动边框动画-LMLPHP

div::after,
div::before {
   content: "";
   position: absolute;
   width: 240px;
   height: 84px;
   border: 2px solid #55557f;
   border-radius: 10px;
 }
div::before{
 border: 2px solid orange;
}

登录后复制

修改伪元素的定位位置

图文详解Clip-path实现按钮流动边框动画-LMLPHP

div::after,
div::before{
 + left: calc(110px - 120px);
 + top: calc(32px - 42px);
}

登录后复制

可以简写为inset

div::after,
div::before{
 - left: calc(110px - 120px);
 - top: calc(32px - 42px);
 - inset: -10px;
}

登录后复制

为伪元素添加动画效果，实现clip-path的变化

语法：

clip-path: inset(20px 50px 10px 0 round 50px);

登录后复制

解释：

图文详解Clip-path实现按钮流动边框动画-LMLPHP

我们尝试对伪元素设置inset

图文详解Clip-path实现按钮流动边框动画-LMLPHP

div::after,
div::before{
  + clip-path: inset(0 0 98% 0);
}

登录后复制

图文详解Clip-path实现按钮流动边框动画-LMLPHP

div::after,
div::before{
  + clip-path: inset(0 98% 0 0);
}

登录后复制

图文详解Clip-path实现按钮流动边框动画-LMLPHP

div::after,
div::before{
  + clip-path: inset( 98% 0  0 0);
}

登录后复制

图文详解Clip-path实现按钮流动边框动画-LMLPHP

div::after,
div::before{
 + clip-path: inset(0  0 0  98% ) ;
}

登录后复制

添加动画

图文详解Clip-path实现按钮流动边框动画-LMLPHP

div::after,
div::before{
  + animation: pathRotate 3s infinite linear;
}

登录后复制

@keyframes pathRotate {  0%,  100% {
    clip-path: inset(0 0 98% 0);
  }  25% {
    clip-path: inset(0 98% 0 0);
  }  50% {
    clip-path: inset(98% 0 0 0);
  }  75% {
    clip-path: inset(0 0 0 98%);
  }
}

登录后复制

为后伪元素添加动画延迟，形成视差效果

div::after {
 animation-delay: -1.5s;
}

登录后复制

去掉前伪元素的border色值设置

图文详解Clip-path实现按钮流动边框动画-LMLPHP

-div::before {
 -  border: 2px solid orange;
-}

登录后复制

div添加hover事件，就完成啦~

图文详解Clip-path实现按钮流动边框动画-LMLPHP

div:hover {
  filter: brightness(1.5);
}

登录后复制

div{	/* 添加过渡效果 */
	transition: all 0.5s;
}

登录后复制

3.实现代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>clip-path实现按钮流动边框</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    div {
      position: relative;
      width: 220px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      color: #fff;
      font-size: 20px;
      background: #55557f;
      cursor: pointer;
      border-radius: 10px;      /* 添加过渡效果 */
      transition: all 0.5s;
    }
    div::after,
    div::before {
      content: "";
      position: absolute;
      border: 2px solid #55557f;
      width: 240px;
      height: 84px;
      border-radius: 10px;      /* 简写为 */
      inset: -10px; 
      /* 添加动画 */
      animation: pathRotate 3s infinite linear;
    }
    @keyframes pathRotate {      0%,      100% {
        clip-path: inset(0 0 98% 0);
      }      25% {
        clip-path: inset(0 98% 0 0);
      }      50% {
        clip-path: inset(98% 0 0 0);
      }      75% {
        clip-path: inset(0 0 0 98%);
      }
    }
    div::after {
      animation-delay: -1.5s;
    }
    div:hover {
      filter: brightness(1.5);
    }
  </style>
  <body>
    <div>苏苏_icon</div>
  </body>
</html>

登录后复制

图文详解Clip-path实现按钮流动边框动画-LMLPHP

以上就是图文详解Clip-path实现按钮流动边框动画的详细内容，更多请关注Work网其它相关文章！