如何让此过渡开始从元素的中心移开？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导航栏悬停效果 - 过渡边框从中心展开

回答

编辑

相关问题