Clip-path实现按钮流动边框动画

苏苏哇哈哈

2024-03-14 帮助6人

前言

👏Clip-path实现按钮流动边框动画，速速来Get吧~

🥇文末分享源代码。记得点赞关注收藏！

1.实现效果

学新通

2.实现步骤

添加div标签

<div>苏苏_icon</div>

添加样式

学新通

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添加前后伪元素，为了方便区分，设置前后伪元素的边框颜色不同

学新通

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

修改伪元素的定位位置

学新通

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

可以简写为inset

inset属性：用来设置left/right/bottom/top

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

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

clip-path：clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
inset()定义一个 inset 矩形。

语法：

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

解释：

当提供所有四个参数时：
它们表示从参考框向内的顶部、右侧、底部和左侧偏移量，这些偏移量定义了插入矩形边缘的位置。这些参数遵循 margin速记的语法，让您可以为所有四个插图设置一个、两个或四个值。

可选border-radiu参数：
使用 border-radius 速记语法为插入矩形定义圆角

学新通

我们尝试对伪元素设置inset

学新通

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

学新通

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

学新通

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

学新通

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

添加动画

学新通

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

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

animation-delay：
CSS属性指定从将动画应用到元素到开始执行动画之前等待的时间量。动画可以稍后开始，从开头立即开始，或者立即在动画的中途开始。

正值表示动画应该在经过指定的时间量后开始。默认值0s表示动画应在应用后立即开始。

负值会导致动画立即开始，但会在其循环的中途开始。例如，如果您指定-1s动画延迟时间，则动画将立即开始，但会在动画序列开始 1 秒后开始。如果您为动画延迟指定负值，但起始值是隐式的，则起始值是从动画应用于元素的那一刻起获取的。

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

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

学新通

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

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

学新通

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>

4.在线预览🍒

CSS新手教程系列之Clip-path实现按钮流动边框动画

Clip-path实现按钮流动边框动画

前言

1.实现效果

2.实现步骤

3.实现代码

4.在线预览🍒

5.写在最后🍒

看完本文如果觉得对你有一丢丢帮助，记得点赞关注收藏鸭 🍕

更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐

Clip-path实现按钮流动边框动画

前言

1.实现效果

2.实现步骤

3.实现代码

4.在线预览🍒

5.写在最后🍒

看完本文如果觉得对你有一丢丢帮助，记得点赞 关注 收藏鸭 🍕

更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐

看完本文如果觉得对你有一丢丢帮助，记得点赞关注收藏鸭 🍕