直播平臺開發，Clip-path實現按鈕流動邊框動畫

zhibo系統開發發表於2023-04-20
動畫

直播平臺開發，Clip-path實現按鈕流動邊框動畫

1.實現步驟

新增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);
}

2.實現程式碼

<!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實現按鈕流動邊框動畫， 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69978258/viewspace-2947140/，如需轉載，請註明出處，否則將追究法律責任。

相關文章