Question

所以基本上，我需要这个过渡来覆盖导航栏的整个高度，宽度要小一些，包含更多，这里是我的CSS：

ul {
  background-color: #282828;
  border-bottom: 7px #276095 solid;
  padding-top: 15px;
  width:100%;
height:50px;
position: absolute;
top: 0;
left: 0;
right: 0;
position:fixed;
z-index:10;
  margin-top: 0px;

}
li {
  display:inline;
padding-right: 50px;
padding-left: 30px;
font-size: 24px;
padding-top:0px;
  margin-top:0px;
  font-family: 'Open Sans', sans-serif;
  text-transform:uppercase;
        width: 100px; height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, #282828 50%, #276095 50%);
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}
li:hover {
      background-position: 0 -100%;
}
a {
  text-decoration:none;
    color:#ffffff;

这是我的HTML：

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<ul>
  <li><a href="home">Home</a></li>
  <li><a href="forum">Forums</a></li>
  <li><a href="shop">Shop</a></li>
  <li><a href="members">Members</a></li>
</ul>

如果您要查看此代码，您会注意到当您将鼠标悬停在菜单项上时，它会有一个滑动过渡，但我似乎无法弄清楚如何让它从顶部滑到底部。您还会注意到宽度有点奇怪，我希望它更小，更均匀。

Answer 1

将padding-top: 15px和padding-bottom: 17px添加到li会使动画跨越整个高度。

padding-left和padding-right控制宽度。你有一个30px，另一个50px，这就是它不均匀的原因。如果你想将它们分开更多，但仍然让蓝色动画部分更薄，你可以添加margin-left或margin-right来增加间距。

导航栏 - 使过渡盖完全高度

1 个答案: