Wie kann ich diesen Übergang von der Mitte des Elements zu bewegen beginnen?Twitter Bootstrap navbar Schwebeflug-Effekt - Übergangsgrenze vom Zentrum aus erweitern

Das ist mein 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; 
}

Der Übergang funktioniert gut, aber ich möchte, dass die Grenze vom Zentrum erweitern, um nach links und rechts ... Dank!

EDIT: Der Übergang arbeitet jetzt, aber ich verwende die Bootstrap-Mail navbar ... und wenn ich ein kleines Gerät und die Verbindungen sind nun vertikal positioniert verwenden, gibt es keine padding-links in einem Element , weil es absolute Positionierung ist ... hoffe du verstehst. (So habe ich kein Abstand zwischen dem linken Browser-Seite und der ein Element)

hier Siehe meine Arbeitsbeispiel (wenn Sie den Browser für mobile Geräte Größe ändern, können Sie sehen, dass es keinen Abstand mehr ist)

/* 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

Quelle

2016-08-02 goldlife

ich möchte, dass die Grenze vom Zentrum erweitern und rechts nach links.

Sie können einen Rahmen nicht so übergehen.

Ich würde vorschlagen, ein Pseudo-Element und eine Transition-Skala.

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>

Alternativ Sie kann Übergang der Breite aber eine Transformation (diesmal eine Übersetzung) erforderlich ist, noch die Zentrierung zu halten.

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>

EDIT

Ich verstehe, dass, wenn die Navigations die „Grenze“ im unteren Ansichtsfenster Breiten könnte sein müssen slighly weniger breite vertikale geht.

Dies kann durch Ändern der Breite und Einstellen der Positionierung ... wie

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

Quelle

2016-08-02 10:30:10

dies funktionieren wird, aber ich benutze den twitter Bootstrap navbar getan werden ... und wenn ich ein kleines Gerät und die Links sind jetzt vertikal positioniert, es gibt keine Padding-links im a-Element, weil es absolute Positionierung ist ... hoffe, Sie verstehen. (also habe ich keinen Abstand zwischen der linken Browserseite und dem a-Element) – goldlife

Ich habe meine Frage aktualisiert. Danke ... – goldlife

OK..so, was soll die Grenze in diesem Fall tun? –

Twitter Bootstrap navbar Schwebeflug-Effekt - Übergangsgrenze vom Zentrum aus erweitern

Antwort

EDIT

Verwandte Themen