仅使用 CSS 的导航栏动画/过渡答案

【问题标题】：Nav Bar Animation / Transition using only CSS仅使用 CSS 的导航栏动画/过渡
【发布时间】：2019-01-24 19:05:15
【问题描述】：

所以，我正在尝试为我的网站制作一个漂亮的导航菜单栏动画/过渡，以创建一个漂亮的外观效果。我的目标是只使用 CSS，而不是添加任何使事情复杂化的 javascript。 This link has the kind of animation我在找。只是给大家一个思路。（浏览 W3 Schools 看看我在寻找什么动画）。

这里的想法是将topnav的background-color从一个页面更改为另一个页面作为平滑过渡。

这是我目前的 CSS 样式。我喜欢我目前的样式，但我只想添加从页面到页面的过渡，以便 background-color 以某种方式像滑块一样

ul.topnav li a:hover:not(.active) {
  background-color: #4d4dff;
  transition: 0.5s;
}

ul.topnav li a.active {
  background-color: #00cc99;
  color: black;
  /* I would like to add in some sort of animations / transition here. */
}

<ul class="topnav">
  <label for="toggle">&#9776;</label>
  <input type="checkbox" id="toggle">
  <div class="menu">
    <li><a href="#" class="active">Home</a>
      <!--Background when active-->
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <!--If I click on this page, it would transition the background COLOR to this page-->
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact Me</a></li>
  </div>
</ul>

编辑评论以回应穆尔贾扬

在此处查看此示例 https://youtu.be/oCUCWnbre0k?t=1014 并遵循此代码。

HTML

* {
  margin: 0;
  padding: 0;
}

.navigation {
  margin: 200px 20px;
  background: #383838;
  color: #FFF;
  overflow: hidden;
  height: 50px;
  width: 1000px;
  box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.navigation li {
  width: 100px;
  border-bottom: 1px solid #666;
  border-right: 2px ridge #585858;
  float: left;
  list-style-type: none;
  font-family: 'ambleregular';
  font-weight: normal;
  font-size: 15px;
  line-height: 28px;
  padding: 10px 10px 10px 10px;
  -webkit-transition: all .9s;
  -moz-transition: all .9s;
  -o-transition: all .9s;
  -ms-transition: all .9s;
  transition: all .9s;
}

.navigation li:hover {
  background: #FE980F;
  border-bottom: 1px solid #FFF;
}

.navigation li a {
  text-decoration: none;
  color: #FFF;
}

.navigation li a:hover {
  color: #333;
}


/* Search box    */

.search_box {
  float: right;
  border: 1px solid #3C3C3C;
  background: #FFF;
  border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  -moz-border-radius: 0.3em;
  -o-border-radius: 0.3em;
  position: absolute;
  margin-top: 8px;
  margin-right: 15px;
  width: 228px;
  left: 765px;
  top: 204px;
}

.search_box form input[type="text"] {
  border: none;
  outline: none;
  background: none;
  font-size: 12px;
  color: #acacac;
  width: 75%;
  padding: 5px;
}


/* Final STEP  */

.search_box form input[type="submit"] {
  border: none;
  cursor: pointer;
  background: url(images/search.png) no-repeat 0px 7px;
  position: absolute;
  right: 0;
  width: 20px;
  height: 25px;
}

<body bgcolor="#faf7fd">
  <ul class="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

  <div class="search_box">
    <form>
      <input type="text" value="Search" onfocus="this.value = ''; {this.value='Search' ;}">
      <input type="submit " value=" ">
    </form>
  </div>
</body>

【问题讨论】：

标签： html css css-transitions css-animations navigationbar

【解决方案1】：

我在 li 上使用了过渡效果，在 a 标签上使用了动画来实现您需要的效果。在没有 javascript 的每个页面上，您必须手动更改活动页面的类。示例：在 about 页面上，about a 标签将具有类 lnk，所有其他 a 标签将具有 aLnk，这是为了突出显示当前页面。

.menu {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #333333;
  height: 50px;
  float: left;
}

ul {
  width: 100%;
  float: left;
  color: #ffffff;
}

li {
  width: 100px;
  height: 34px;
  float: left;
  list-style: none;
  background-color: transparent;
  transition: ease-in-out .9s;
  text-align: center;
  padding-top: 10px;
}

li:hover {
  background-color: orange;
  transition: ease-in-out .9s;
}

.aLnk {
  width: 100%;
  height: 100%;
  float: left;
  text-decoration: none;
  color: #ffffff;
  transition: ease-in-out .9s;
}

.aLnk:hover {
  color: yellow;
  transition: ease-in-out .9s;
  animation-name: changeColor;
  animation-duration: .9s;
  animation-iteration-count: infinate;
}

@keyframes changeColor {
  10% {
    color: #000000;
  }
  100% {
    color: yellow;
  }
}

.active {
  background-color: orange;
}

.lnk {
  color: yellow;
  text-decoration: none;
}

.lnk:hover {
  color: yellow;
}

<div class="menu">
  <ul class="topnav">
    <li class="active"><a class="lnk" href="index.html">Home</a></li>
    <li><a class="aLnk" href="about.html">About</a></li>
    <li><a class="aLnk" href="portfolio.html">Portfolio</a></li>

  </ul>
</div>

【讨论】：

【解决方案2】：

我认为纯 CSS 无法做到这一点。原因是每当您单击链接时，它都会加载一个新页面。要创建您想要的效果，有必要在内存中保留之前的背景颜色以导致过渡。

例如，如果背景的最终颜色如下

主页 => 蓝色
关于页面 => 红色
投资组合页面 => 绿色

如果您从主页转到“关于”页面，则过渡应该是蓝色到红色，但假设您要从作品集页面转到“关于”页面，则过渡应该是绿色到红色。

使用纯 CSS 无法知道前一页是蓝色还是绿色，以便在 about 页面中过渡到红色。

我建议你学习一些前端框架，如 React、Vue 或 Angular。有了这些，

* {
  margin: 0;
  padding: 0;
}
    
.navigation {
  margin: 200px 20px;
  background: #383838;
  color: #FFF;
  overflow: hidden;
  height: 50px;
  width: 1000px;
  box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
    
.navigation li {
  width: 100px;
  border-bottom: 1px solid #666;
  border-right: 2px ridge #585858;
  float: left;
  list-style-type: none;
  font-family: 'ambleregular';
  font-weight: normal;
  font-size: 15px;
  line-height: 28px;
  padding: 10px 10px 10px 10px;
  -webkit-transition: all .9s;
  -moz-transition: all .9s;
  -o-transition: all .9s;
  -ms-transition: all .9s;
  transition: all .9s;
}

.navigation .active {
  background: #FE980F;
  border-bottom: 1px solid #FFF;
  animation: animatedNav 1s;
  animation-timing-function: ease-in;
}

@keyframes animatedNav {
  0% {background: #383838;}
  100% {background: #FE980F;}
}

.navigation li a {
  text-decoration: none;
  color: #FFF;
}

.navigation .active a {
  color: #333;
}

<!-- home.html --> 

     <body bgcolor="#faf7fd">
        <ul class="navigation">
          <li class="active"><a href="./index.html">Home</a></li>
          <li><a href="./products.html">Products</a></li>
        </ul>
      </body>

<!-- products.html -->

     <body bgcolor="#faf7fd">
        <ul class="navigation">
          <li><a href="./index.html">Home</a></li>
          <li class="active"><a href="./products.html">Products</a></li>
        </ul>
      </body>

您可以创建令人印象深刻的页面过渡。

顺便检查一下下面的代码，看看这是否是您想要的效果。

这样做的问题是先前访问的链接将没有过渡

【讨论】：

老实说，我只想从一个页面过渡到另一个页面，只有一种背景颜色，而不是多种背景颜色。
如答案中所述，我认为使用纯 CSS 不可能做到这一点，因为新页面不知道前一页上的颜色是什么来进行过渡。
所以您将在每个选项卡上只使用两种颜色？例如，如果页面处于活动状态，则始终从黑色变为黄色。
你不能不使用 CSS 来实现这一点。 为什么？很简单，你正在调用一个新页面，而之前的css转换不会影响新页面。您可以制作标签并将每个页面加载为标签内容或在每个页面中制作动画以显示从 Home 到 About 的过渡。
我同意@Teocci，这也是我想要传达的。由于 CSS 无法记住之前访问过的页面，因此无法在之前点击的链接上添加过渡效果。