为什么我的CSS或Sass转换不工作？

Question

所以我试图让转换工作0.5秒，每当我悬停到按钮，但它没有工作，有人有线索吗？

这是我的代码:

null

.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);
    }

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

null

Answer 1

背景渐变是不可动画的，但是你可以通过背景位置来实现这种效果。

null

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

Answer 2

渐变是一个背景图像，你不能像那样把一个背景图像过渡到另一个。 不过，您可以使用伪元素来创建您想要的效果。

null

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

Answer 3

我想你用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>

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