我的导航栏有问题。我添加了一个颜色过渡效果，但是当我把鼠标悬停在文字上时，它会晃动。它出现在我放大或缩小浏览器(Chrome)后。"震动"似乎不是恒定的。
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,300);
@font-face {
font-family: 'BebasNeuewebfont';
src: url('../fonts/BebasNeuewebfont.eot');
src: local('../fonts/BebasNeuewebfont'), url('../fonts/BebasNeuewebfont.woff') format('woff'), url('../fonts/BebasNeuewebfont.ttf') format('truetype');
}
body {
background-color: #eee !important;
}
/* Navbar*/
.navbar {
background-color: #fff !important;
padding-top: 6px;
}
.navbar .navbar-nav>.active>a:hover,.navbar .navbar-nav>li>a:hover, .navbar .navbar-nav>li>a:focus { background-color: #4375D7}
.navbar .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar .navbar-nav>.open>a, .navbar .navbar-nav>.open>a:hover,.navbar .navbar-nav>.open>a, .navbar .navbar-nav>.open>a:hover,
.navbar .navbar-nav>.open>a:focus { background-color: #4C89FF}
.dropdown-menu {
background-color: #fff !important;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #4375D7}
.navbar { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar { border-color: #353739}
.navbar .navbar-brand {
color: #4C89FF !important;
}
.navbar .navbar-brand:hover { color: #4375D7}
.navbar .navbar-nav>li>a { color: #B0B0B0}
.navbar .navbar-nav>li>a:hover, .navbar .navbar-nav>li>a:focus { color: #353739}
.navbar .navbar-nav>.active>a,.navbar .navbar-nav>.open>a, .navbar .navbar-nav>.open>a:hover, .navbar .navbar-nav>.open>a:focus {
background-color: #fff !important;
}
.navbar .navbar-nav>.active>a:hover, .navbar .navbar-nav>.active>a:focus { color: #353739}
.dropdown-menu>li>a { color: #B0B0B0}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #fff}
.navbar{ /* assigning the top bar to the entire navbar div element */
text-align: center;
box-shadow: inset 0px 6px 0px #4C89FF;
/* initial light-blue color to the top bar */
}
.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
color: #000;
background: #4C89FF;
margin-top: -6px;
padding-top: 21px;
box-shadow: inset 0px 6px 0px #75A4FF;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
/* switch to a lighter color for active element */
}
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
color: #000;
background-color: #fff;
margin-top: -6px;
padding-top: 21px;
box-shadow: inset 0px 6px 0px #3c6dcc;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-kthtml-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
/* switch to a darker-blue color on hover */
}
.navbar-brand {
font-family: 'BebasNeuewebfont' !important;
font-size: 40px !important;
letter-spacing: 2px;
font-weight: 400 !important;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
.navbar-brand:hover,
.navbar-brand:focus {
box-shadow: inset 0px 6px 0px #3c6dcc; /* switch to a darker color on hover */
margin-top: -6px;
padding-top: 21px;
padding-bottom: 35px;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-kthtml-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.navbar a {
font-family: 'Quicksand', sans-serif;
font-weight: 600;
}
.navbar .navbar-toggle {
border-color: #333;
padding-top: 6px;
}<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/jpg" href="#">
<meta charset="utf-8">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
<!-- Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
</head>
<body>
<!-- Navbar -->
<header class="navbar navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand active">Brand</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href="#">Text</a></li>
</ul>
</nav>
</div>
</header>
</body>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</html>项目链接:
http://jsfiddle.net/XENONFFM/0yygc5q5/它抖动是因为你的动画从无框阴影(0px)变成了框阴影(6px)。
在这种情况下，我个人会使用border属性而不是box-shadow。这里要做的主要事情是提前定义边框/框影，但不要显示它。要做到这一点，你可以将颜色设置为透明，然后当你悬停时，将其设置为你想要的颜色。
下面是一些伪代码:
header {
border-top: 5px solid purple;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
li {
float: left;
margin: -5px;
padding: 15px 25px;
border-top: 5px solid transparent;
transition: all 300ms ease-in-out;
}
li:hover {
border-top: 5px solid yellow;
}<header>
<nav>
<ul>
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
</ul>
</nav>
</header>如果你想继续使用box-shadow复制你的margin, padding和box-shadow属性从你的悬停选择器(.navbar .navbar-nav > li > a:hover)到你的链接选择器(.navbar .navbar-nav > li > a)，并设置颜色为transparent。