圖文詳解Clip-path實現按鈕流動邊框動畫

這篇文章為大家帶來了關於前端按鈕的相關知識，其中主要跟大家聊一聊如何用Clip-path實現按鈕流動邊框動畫，感興趣的朋友下面一起來看一下吧，希望對大家有幫助。

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.实现代码

  
    
    
  
  
  
  
    <div>苏苏_icon</div>
  

以上是圖文詳解Clip-path實現按鈕流動邊框動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！