Css转换抖动

Question

我的导航栏出现问题。 我添加了颜色转换效果，但是如果我将鼠标悬停在文字上，文字会晃动。它在我放大或缩小浏览器（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 { 
 
\t font-family: 'BebasNeuewebfont'; 
 
\t src: url('../fonts/BebasNeuewebfont.eot'); 
 
\t src: local('../fonts/BebasNeuewebfont'), url('../fonts/BebasNeuewebfont.woff') format('woff'), url('../fonts/BebasNeuewebfont.ttf') format('truetype'); 
 
} 
 
body { 
 
\t background-color: #eee !important; 
 
} 
 
/* Navbar*/ 
 
.navbar { 
 
\t background-color: #fff !important; 
 
\t 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 { 
 
\t 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 { 
 
\t 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 { 
 
\t 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; 
 
\t 
 
\t /* 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; 
 
\t margin-top: -6px; 
 
\t padding-top: 21px; 
 
    box-shadow: inset 0px 6px 0px #75A4FF; 
 
\t 
 
\t -webkit-backface-visibility: hidden; 
 
\t -webkit-transform: translateZ(0) scale(1.0, 1.0); 
 
\t 
 
\t /* 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; 
 
\t margin-top: -6px; 
 
\t padding-top: 21px; 
 
    box-shadow: inset 0px 6px 0px #3c6dcc; 
 
\t 
 
\t -webkit-transition: all 0.3s ease-in-out; 
 
    \t -o-transition: all 0.3s ease-in-out; 
 
    \t -moz-transition: all 0.3s ease-in-out; 
 
    \t -ms-transition: all 0.3s ease-in-out; 
 
    -kthtml-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
\t 
 
\t /* 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; 
 
\t 
 
\t -webkit-backface-visibility: hidden; 
 
\t -webkit-transform: translateZ(0) scale(1.0, 1.0); 
 
\t 
 
} 
 

 
.navbar-brand:hover, 
 
.navbar-brand:focus { 
 
    box-shadow: inset 0px 6px 0px #3c6dcc; /* switch to a darker color on hover */ 
 
\t margin-top: -6px; 
 
\t padding-top: 21px; 
 
\t padding-bottom: 35px; 
 
\t 
 
\t -webkit-transition: all 0.4s ease-in-out; 
 
    \t -o-transition: all 0.4s ease-in-out; 
 
    \t -moz-transition: all 0.4s ease-in-out; 
 
    \t -ms-transition: all 0.4s ease-in-out; 
 
    -kthtml-transition: all 0.4s ease-in-out; 
 
    transition: all 0.4s ease-in-out; 
 
\t 
 
} 
 

 
.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"> 
 
\t 
 
<!-- 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/

Answer 1

而动摇，因为你从没有的box-shadow（0像素）的箱阴影动画（6像素）。

就我个人而言，在这种情况下，我会使用border属性而不是box-shadow。这里要做的主要事情是提前定义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让您悬停选择器（.navbar .navbar-nav > li > a:hover）复制你margin，padding和box-shadow属性您链接选择器（.navbar .navbar-nav > li > a），并将颜色设置为transparent。