如何讓此過渡開始從元素的中心移開？Twitter Bootstrap導航欄懸停效果 - 過渡邊框從中心展開

這是我的CSS：

/* Navbar */ 
.navbar-fixed-top{ 
    top: 80px; 
} 
.navbar-default{ /* assigning the top bar to the entire navbar div element */ 
    background-color: #4F4F4F; 
} 
nav.navbar { box-shadow: 0 0 2px 0 #ccc; } 
nav.navbar a { color: #FF7D36; } 
nav.navbar ul.navbar-nav a { color: #FF7D36; border-style: solid; border-width: 0 0 2px 0; border-color: #000; } 
nav.navbar ul.navbar-nav a:hover, 
nav.navbar ul.navbar-nav a:visited, 
nav.navbar ul.navbar-nav a:focus, 
nav.navbar ul.navbar-nav a:active { background: #000; } 
nav.navbar ul.navbar-nav a:hover 
{ 
    border-color: #FF7D36; 
    transition: border 0.5s ease-in-out; 
}

過渡工作正常，但我想，邊界從中心擴展到左，右...... 謝謝！

編輯：過渡工作了，但我使用Twitter的引導導航欄......當我用一個小的設備和鏈路現在垂直放置，沒有填充左的一個元素，，因爲它是絕對定位...希望你明白。（所以我有左側瀏覽器端和一個元素之間沒有距離）

看到這裏我的工作示例（當你調整針對移動設備的瀏覽器，你可以看到，沒有距離再）

/* Navbar */ 
 
.navbar-fixed-top{ 
 
    top: 80px; 
 
} 
 
.navbar-default{ /* assigning the top bar to the entire navbar div element */ 
 
    background-color: #4F4F4F; 
 
} 
 
nav.navbar { 
 
    box-shadow: 0 0 2px 0 #ccc; 
 
} 
 
nav.navbar a { 
 
    color: #FF7D36; 
 
} 
 
nav.navbar ul.navbar-nav a { 
 
    color: #FF7D36; 
 
    border-style: solid; 
 
    border-width: 0 0 2px 0; 
 
    border-color: #000; 
 
} 
 
nav.navbar ul.navbar-nav a:hover, 
 
nav.navbar ul.navbar-nav a:visited, 
 
nav.navbar ul.navbar-nav a:focus, 
 
nav.navbar ul.navbar-nav a:active { 
 
    background: #000; 
 
} 
 

 
nav.navbar ul.navbar-nav a { 
 
    text-decoration: none; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
nav.navbar ul.navbar-nav a::after { 
 
    content: ''; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    height: 2px; 
 
    background-color: #FF7D36; 
 
    transform: scaleX(0); 
 
    transition: transform .35s ease; 
 
} 
 
nav.navbar ul.navbar-nav a:hover::after { 
 
    transform: scaleX(1); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title>Basic Bootstrap Template</title> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<!-- Optional Bootstrap theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Navigation ein-/ausblenden</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Projekt-Titel</a> 
 
     </div> 
 
     <div id="navbar" class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Start</a></li> 
 
      <li><a href="#ueber">Über</a></li> 
 
      <li><a href="#kontakt">Kontakt</a></li> 
 
      </ul> 
 
     </div><!--/.nav-collapse --> 
 
     </div> 
 
    </nav> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</body> 
 
</html>         \t \t

來源

2016-08-02 goldlife

我想，邊界從中心向左右展開。

您不能像這樣轉換邊框。

我建議一個僞元素和一個轉換的變換比例。

a { 
 
    text-decoration: none; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
a::after { 
 
    content: ''; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    height: 2px; 
 
    background: red; 
 
    transform: scaleX(0); 
 
    transition: transform .35s ease; 
 
} 
 
a:hover::after { 
 
    transform: scaleX(1); 
 
}

<a href="#1">SOME LINK</a>

或者，您也可以過渡的寬度但變換（此時翻譯）仍然需要保持居中。

a { 
 
    text-decoration: none; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
a::after { 
 
    content: ''; 
 
    width: 0%; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    height: 2px; 
 
    background: red; 
 
    transform: translateX(-50%); 
 
    transition: width .5s ease; 
 
} 
 
a:hover::after { 
 
    width: 100%; 
 
}

<a href="#1">SOME LINK</a>

編輯

我明白，當導航在較低的視口垂直向上寬度的「邊界」可能需要的性能稍微少寬。

這可以通過更改寬度和調整定位完成...如

nav.navbar ul.navbar-nav a::after { 
    content: ''; 
    width: 80%; 
    position: absolute; 
    top: 100%; 
    left: 10%; /* (100% - 80%)/2 */ 
    height: 2px; 
    background-color: #FF7D36; 
    transform: scaleX(0); 
    transition: transform .35s ease; 
}

Codepen Demo

來源

2016-08-02 10:30:10

這會工作，但我使用Twitter的引導導航欄......當我使用一個小設備和鏈接現在垂直放置，a元素中沒有填充，因爲它是絕對定位的......希望你明白。（所以我沒有左側瀏覽器端和a元素之間的距離） – goldlife

我已更新我的問題。謝謝... – goldlife

行..那麼你想在這種情況下邊界做什麼？ –

Twitter Bootstrap導航欄懸停效果 - 過渡邊框從中心展開

回答

編輯

相關問題