前言
??Clip-path實(shí)現(xiàn)按鈕流動(dòng)邊框動(dòng)畫(huà)，速速來(lái)Get吧~
??文末分享源代碼。記得點(diǎn)贊+關(guān)注+收藏！
1.實(shí)現(xiàn)效果
2.實(shí)現(xiàn)步驟
- 添加div標(biāo)簽
<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添加前后偽元素，為了方便區(qū)分，設(shè)置前后偽元素的邊框顏色不同
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);
}
- 可以簡(jiǎn)寫(xiě)為inset
inset屬性：用來(lái)設(shè)置left/right/bottom/top
div::after,
div::before{
- left: calc(110px - 120px);
- top: calc(32px - 42px);
- inset: -10px;
}
- 為偽元素添加動(dòng)畫(huà)效果，實(shí)現(xiàn)clip-path的變化
clip-path：clip-path CSS 屬性使用裁剪方式創(chuàng)建元素的可顯示區(qū)域。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。
inset()定義一個(gè) inset 矩形。
- 語(yǔ)法：
clip-path: inset(20px 50px 10px 0 round 50px);
- 解釋?zhuān)?/li>
當(dāng)提供所有四個(gè)參數(shù)時(shí)：
它們表示從參考框向內(nèi)的頂部、右側(cè)、底部和左側(cè)偏移量，這些偏移量定義了插入矩形邊緣的位置。這些參數(shù)遵循 margin速記的語(yǔ)法，讓您可以為所有四個(gè)插圖設(shè)置一個(gè)、兩個(gè)或四個(gè)值。
可選border-radiu參數(shù)：
使用 border-radius 速記語(yǔ)法為插入矩形定義圓角
- 我們嘗試對(duì)偽元素設(shè)置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% ) ;
}
- 添加動(dòng)畫(huà)
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%);
}
}
-
為后偽元素添加動(dòng)畫(huà)延遲，形成視差效果
在這里插入圖片描述
CSS屬性指定從將動(dòng)畫(huà)應(yīng)用到元素到開(kāi)始執(zhí)行動(dòng)畫(huà)之前等待的時(shí)間量。動(dòng)畫(huà)可以稍后開(kāi)始，從開(kāi)頭立即開(kāi)始，或者立即在動(dòng)畫(huà)的中途開(kāi)始。
正值表示動(dòng)畫(huà)應(yīng)該在經(jīng)過(guò)指定的時(shí)間量后開(kāi)始。默認(rèn)值0s表示動(dòng)畫(huà)應(yīng)在應(yīng)用后立即開(kāi)始。
負(fù)值會(huì)導(dǎo)致動(dòng)畫(huà)立即開(kāi)始，但會(huì)在其循環(huán)的中途開(kāi)始。例如，如果您指定-1s動(dòng)畫(huà)延遲時(shí)間，則動(dòng)畫(huà)將立即開(kāi)始，但會(huì)在動(dòng)畫(huà)序列開(kāi)始 1 秒后開(kāi)始。如果您為動(dòng)畫(huà)延遲指定負(fù)值，但起始值是隱式的，則起始值是從動(dòng)畫(huà)應(yīng)用于元素的那一刻起獲取的。
div::after {
animation-delay: -1.5s;
}
- 去掉前偽元素的border色值設(shè)置
-div::before {
- border: 2px solid orange;
-}
- div添加hover事件，就完成啦~
div:hover {
filter: brightness(1.5);
}
div{
/* 添加過(guò)渡效果 */
transition: all 0.5s;
}
3.實(shí)現(xiàn)代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>clip-path實(shí)現(xiàn)按鈕流動(dòng)邊框</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;
/* 添加過(guò)渡效果 */
transition: all 0.5s;
}
div::after,
div::before {
content: "";
position: absolute;
border: 2px solid #55557f;
width: 240px;
height: 84px;
border-radius: 10px;
/* 簡(jiǎn)寫(xiě)為 */
inset: -10px;
/* 添加動(dòng)畫(huà) */
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>
