为什么我的 CSS 或 Sass 转换不起作用？答案

【问题标题】：Why is my CSS or Sass Transition not working?为什么我的 CSS 或 Sass 转换不起作用？
【发布时间】：2020-07-28 13:23:28
【问题描述】：

因此，每当我将鼠标悬停在按钮上时，我都会尝试使过渡工作 0.5 秒，但它不起作用，有人知道吗？

这是我的代码：

.btn {
    display: inline-block;
    background-image: linear-gradient(90deg, #e34067,#f89c4b);
    padding: 1rem 2rem;
    padding-left: 1.4rem;
    align-items: center;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.5s;
}
    .btn p {
        padding-left: 0.5rem;
    }
    .btn:hover {
        background-image: linear-gradient(90deg,#f89c4b, #e34067);
    }

<div type="button" class="add-photo">
  <a class="btn" href="#"><i class="fa fa-plus-circle"></i>
      <p>  Add Photo</p>
  </a>
</div>

【问题讨论】：

请注意，将type="button" 添加到div 元素没有任何作用，并且是无效的HTML 引导...
背景图片不支持转场，看这个问题stackoverflow.com/questions/9483364/…
这能回答你的问题吗？ CSS3 background image transition

标签： html css sass

【解决方案1】：

我认为您使用该 div 元素创建了您的按钮。因此，您必须将 btn 类添加到 div 中。正确的代码是

<div type="button" class="add-photo btn"> <a href="#"><i class="fa fa-plus-circle"></i> <p> Add Photo</p> </a> </div>

我建议不要像讨论过的here 那样将 div 用作按钮。

【讨论】：

【解决方案2】：

渐变是背景图片，您不能像这样将一张背景图片转换为另一张背景图片。你可以使用伪元素来创建你想要的效果。

.btn {
  position: relative;
  display: inline-block;
  padding: 1rem 2rem 1rem 1.4rem;
  align-items: center;
background-color: #f89c4b;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

.btn:before,
.btn:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  transition: opacity 0.5s;
}

.btn:before {
  background-image: linear-gradient(90deg, #e34067,#f89c4b);
  opacity: 1;
}

.btn:after {
  background-image: linear-gradient(90deg,#f89c4b, #e34067);
  opacity: 0;
}

  p {
position: relative;
padding-left: 0.5rem;
z-index: 5;
  }

.btn:hover:before {
  opacity: 0;
}

.btn:hover:after {
  opacity: 1;
}

<div type="button" class="add-photo">
  <a class="btn" href="#"><i class="fa fa-plus-circle"></i>
      <p>  Add Photo</p>
  </a>
</div>

【讨论】：

【解决方案3】：

背景渐变是不可动画的，但您可以使用 background-position 来实现该效果。

.btn {
    display: inline-block;
    background-image: linear-gradient(90deg,#f89c4b, #e34067, #f89c4b);
    background-size: 200%;
    background-position: 0 0;
    padding: 1rem 2rem;
    padding-left: 1.4rem;
    align-items: center;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: background-position 0.5s;
}
    .btn p {
        padding-left: 0.5rem;
    }
    .btn:hover {
        background-position: 100% 0px;
    }

<div type="button" class="add-photo">
  <a class="btn" href="#"><i class="fa fa-plus-circle"></i>
      <p>  Add Photo</p>
  </a>
</div>

【讨论】：