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

​