動畫邊框底部的長度

Question

我有一個導航欄。 在懸停任何菜單項時，我希望具有與此處完全相同的邊框底部動畫效果（查看當您懸停它們時左上角的邊框或菜單項如何動畫。）

我試圖在 stackoverflow 和谷歌上找到類似的問題，但我沒有找到任何有用的東西。

任何幫助都非常感謝。

Answer 1

嗯，這就像使用開發人員工具檢查網絡一樣簡單。 他們在該頁面中所做的是使用:before偽元素在菜單內創建一個元素。 在懸停時，他們使用 CSS 轉換（縮放）來更改長度。

jsfiddle 。

span
{
    display: inline-block;
    padding: 6px 0px 4px;
    margin: 0px 8px 0px;
    position: relative;
}

span:before
{
    content: '';
    position: absolute;
    width: 100%;
    height: 0px;
    border-bottom: 1px solid black;
    bottom: 2px;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform 0.2s ease-in;
    transition: transform 0.2s ease-in;
}

span:hover:before
{
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

Answer 2

邊框的長度不能與其包圍的元素不同。 但是，您可以僅使用 CSS 實現類似的效果 - 使用偽元素。 怎么樣像下面這樣：

div:after{
    position:absolute;
    bottom:0;
    left:50%;
    height:1px;
    width:0%;
    background-color:#444;
    display:block;
    content:'';
    transition:0.3s;
}

div:hover:after{
    left:0;
    width:100%;
}

JSFiddle

Answer 3

它不是邊框底部，它是使用 css pusedo 元素完成的:before

.navigation li a::before {
    position: absolute;
    bottom: -1px;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background-color: #fff;
    display: block;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    transform: scaleX(0);
}

.navigation li a::before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    transform: scaleX(1);
}