直播平台开发，Clip-path实现按钮流动边框动画

1.实现步骤

添加div标签

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

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

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

修改伪元素的定位位置

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

2.实现代码

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