懸停框的動畫邊框（邊框左側，邊框頂部）

我想動畫兩個邊框左側和邊框頂部的懸停動畫。在做了一些研究之後，似乎你實際上並不能自己對邊界進行「動畫」處理，所以你必須創建一個「線條」，懸停的寬度應設置爲100％才能產生相同的效果。懸停框的動畫邊框（邊框左側，邊框頂部）

我知道如何使用下劃線菜單項來做到這一點，但我想用我想創建的這個框做到這一點。特別是懸停時（同時保持css效果已經寫好）

1）border-left應該延伸到頂部，然後在右邊 - > 2）border-top從左到右延伸。

另外我想知道如果我不想只做邊界左邊界或邊界頂點，我可以選擇擴展邊界。

這是我的盒子迄今（可惜沒有用動畫邊框）：

CSS：

#txt{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    font-size:2vw; 
} 
#box{ 
    position:fixed; 
    top:25%; 
    left:25%; 
    height:20vw; 
    width:20vw; 
    border-right: 2px solid deepskyblue; 
    border-bottom: 2px solid deepskyblue; 
    background-color:black; 
    color:ghostwhite; 
} 
#box:hover{ 
    color:deepskyblue; 
    transition: color 0.25s ease; 
} 
#box:after{ 
    content:""; 
    position:absolute; 
    bottom: 0; 
    left: 0; 
    width:100%; 
    height:100%; 
    transform: scale(0, 0); 
    transform-origin:bottom right; 
    background: ghostwhite; 
    z-index: -1; 
    transition: transform 0.25s ease; 
} 
#box:hover::after{ 
    transform: scale(1, 1); 
    color:deepskyblue; 
}

HTML：

<div id="box"> 
<span id="txt">TEXT</span> 
</div>

來源

2017-09-20 slsl3079

可以使#txt元素一樣大父框，然後使用僞元素來製作「邊框」併爲這些僞元素的尺寸設置動畫。

如果你添加一個transiton-delay我認爲你可以得到你的效果。

#txt { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
#box { 
 
    font-size: 2vw; 
 
    position: fixed; 
 
    top: 1em; 
 
    left: 40vw; 
 
    height: 20vw; 
 
    width: 20vw; 
 
    background-color: black; 
 
    color: ghostwhite; 
 
} 
 

 
#box:hover { 
 
    color: deepskyblue; 
 
    transition: color 0.25s ease; 
 
} 
 

 
#box:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform: scale(0, 0); 
 
    transform-origin: bottom right; 
 
    background: ghostwhite; 
 
    z-index: -1; 
 
    transition: transform 0.25s ease; 
 
} 
 

 
#box:hover::after { 
 
    transform: scale(1, 1); 
 
    color: deepskyblue; 
 
} 
 

 
#txt::before { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: 2; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 0; 
 
} 
 

 
#txt::before { 
 
    width: 0; 
 
    border-left: 2px solid deepskyblue; 
 
    transition: height .25s .5s ease; 
 
} 
 

 
#txt:hover::before { 
 
    height: 100%; 
 
} 
 

 
#txt::after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0%; 
 
    top: 0; 
 
    left: 0; 
 
    border-top: 2px solid deepskyblue; 
 
    transition: width 0.25s .75s ease; 
 
} 
 

 
#txt:hover::after { 
 
    width: 100%; 
 
}

<div id="box"> 
 
    <span id="txt">TEXT</span> 
 
</div>

來源

2017-09-20 19:13:53

懸停框的動畫邊框（邊框左側，邊框頂部）

回答

相關問題