使用 CSS 将导航按钮标记为活动状态

Question

我有方形导航按钮，我想在其中直观地显示哪些是活动的，例如使用：

目前我为此使用background: linear-gradient。然而，这很难制作动画，因此我正在寻找替代品。 HTML 结构如下所示：

<div class='navigation-button'>
    <div class='navigation-button-container'>
        <i class='fa fa-bars'></i>
    </div>
</div>

对应的CSS：

.navigation-button {
    width: 50px;
    height: 50px;
    background: purple;
}

.navigation-button-container {
    width: 100%;
    height: 100%;
    text-align: center; 
}

.navigation-button-container i {
    margin-top: 25%;
    margin-bottom: 25%;
    color: white;
}

.active {
    background: linear-gradient(right, blue 0%, blue 10%, rgba(0,0,0,0) 10%);
}

active 类可以应用于navigation-button-container 以获得所需的效果。但是，我想淡入淡出，据我所知，linear-gradients 不能动画。

我已经考虑在navigation-button-container 之前添加一个元素并为其宽度设置动画并使用CSS ::before 语法，但似乎都没有帮助。有没有一种高效的 CSS 方法可以使用 @keyframes 或 transition 获得所需的效果？

Answer 1

这是您需要的吗？ .nb-container 上有一个 ::before 伪元素，它具有宽度过渡。

.nb {
  background-color: #f00;
  display: block;
  height: 50px;
  width: 50px;
}

.nb-container {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center; 
}

.nb-container i {
  color: white;
  display: inline-block;
  margin: 25% 0 25%;
}

.nb-container ::before {
  background-color: #00f;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: width .2s;
  width: 0;
}

.nb-container:hover ::before, .nb-container:focus ::before {
  width: 20%;
}

Mouse over the elements to see the effect:
<div class="nb">
  <div class="nb-container">
    <i class="fa fa-bars">∆</i>
  </div>
</div>
<div class="nb">
  <div class="nb-container">
    <i class="fa fa-bars">®</i>
  </div>
</div>
<div class="nb">
  <div class="nb-container">
    <i class="fa fa-bars">©</i>
  </div>
</div>

::before 元素的动画方式非常灵活。因此，如果您想要淡入而不是滑入：

.nb {
  background-color: #f00;
  display: block;
  height: 50px;
  width: 50px;
}

.nb-container {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center; 
}

.nb-container i {
  color: white;
  display: inline-block;
  margin: 25% 0 25%;
}

.nb-container ::before {
  background-color: #00f;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity .2s;
  width: 20%;
}

.nb-container:hover ::before, .nb-container:focus ::before {
  opacity: 1;
}

Mouse over the elements to see the effect:
<div class="nb">
  <div class="nb-container">
    <i class="fa fa-bars">∆</i>
  </div>
</div>
<div class="nb">
  <div class="nb-container">
    <i class="fa fa-bars">®</i>
  </div>
</div>
<div class="nb">
  <div class="nb-container">
    <i class="fa fa-bars">©</i>
  </div>
</div>