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

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

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