Question

因此，我正在尝试为我的网站制作一个漂亮的涂料导航菜单栏动画/过渡，以创建漂亮的效果。我的目标是仅使用CSS，而不添加任何只会使事情复杂化的JavaScript。 This link has the kind of animation我在寻找。只是为了给大家一个想法。（只需浏览W3学校，看看我正在寻找什么动画。）

这里的想法是将topnav的{{1}}在页面之间进行平滑过渡。

这是我目前用于CSS样式的内容。我喜欢当前的样式，但我只想添加从页面到页面的过渡，以使background-color在某种程度上像滑块一样

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

编辑对穆贾扬的回应的评论

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

HTML

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

* {
  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;
}

Answer 1

我在li上使用了过渡效果，在a标签上使用了动画效果，以实现所需的效果。在每个没有javascript的页面上，您都必须手动更改活动页面的类。示例：在About页面上，about标记将具有lnk类，而所有其他标记将具有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>

Answer 2

我认为使用纯 CSS 不可能做到这一点。原因是只要您单击链接就会加载新页面。要创建所需的效果，必须将先前的背景色保留在内存中以引起过渡。

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

主页=>蓝色
关于页面=>红色
作品页=>绿色

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

使用纯 CSS 时，无法知道关于页面的上一页是蓝色还是绿色转换为红色。

我建议您学习一些前端框架，例如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进行过渡

2 个答案: