Question

我试图使用背景位置/转换黑客找到here和here来动画悬停时面板的背景转换......我不确定我做错了什么，但它并不适合我。

这是我到目前为止的相关代码（使用Bootstrap v3）

HTML：

<div class="panel panel-default">
  <div class="panel-body">
    <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
    <strong>Portfolio Name: &nbsp;&nbsp;&nbsp;</strong>Foo
  </div>
</div>

SCSS：

.panel,
.panel-default {
  border-radius: 3rem;
  cursor: pointer;
  cursor: hand;
  overflow: hidden;
}

.panel-body {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f4f4f4));
  background-image: -webkit-linear-gradient(#fff, #f4f4f4);
  background-image: -moz-linear-gradient(#fff, #f4f4f4);
  background-image: -o-linear-gradient(#fff, #f4f4f4);
  background-image: linear-gradient(#fff, #f4f4f4);
  -webkit-background-size: auto 200%;
  background-size: auto 200%;
  background-position: 0 100%;
  font-size: medium;
  padding-left: 56px;
  padding-left: 3.5rem;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;

  .glyphicon-link {
    padding-right: 56px;
    padding-right: 3.5rem;
  }
}

.panel-body:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#093479));
  background-image: -webkit-linear-gradient(#337ab7, #093479);
  background-image: -moz-linear-gradient(#337ab7, #093479);
  background-image: -o-linear-gradient(#337ab7, #093479);
  background-image: linear-gradient(#337ab7, #093479);
  background-position: 0 0;
  color: white;
  padding-left: 88px;
  padding-left: 5.5rem;
}

.panel-body:active {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#1eb759), to(#4f8547));
  background-image: -webkit-linear-gradient(#1eb759, #4f8547);
  background-image: -moz-linear-gradient(#1eb759, #4f8547);
  background-image: -o-linear-gradient(#1eb759, #4f8547);
  background-image: linear-gradient(#1eb759, #4f8547);
}

我还设置了jsfiddle here：

Answer 1

您在background-image上设置了新的:hover - 您只想调整background-position上的:hover。

.panel,
.panel-default {
  border-radius: 3rem;
  cursor: pointer;
  cursor: hand;
  overflow: hidden;
}

.panel-body {
  background-image: -webkit-linear-gradient(top, #fff 0%, #f4f4f4 25%, #337ab7 75%, #093479 100%);
  background-image: linear-gradient(to bottom, #fff 0%, #f4f4f4 25%, #337ab7 75%, #093479 100%);
  background-size: auto 400%;
  background-position: 0 0;
  font-size: medium;
  padding-left: 56px;
  padding-left: 3.5rem;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}
.panel-body .glyphicon-link {
  padding-right: 56px;
  padding-right: 3.5rem;
}

.panel-body:hover {
  background-position: 0 100%;
  color: white;
  padding-left: 88px;
  padding-left: 5.5rem;
}

.panel-body:active {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#1eb759), to(#4f8547));
  background-image: -webkit-linear-gradient(#1eb759, #4f8547);
  background-image: linear-gradient(#1eb759, #4f8547);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="panel panel-default">
  <div class="panel-body">
    <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
    <strong>Portfolio Name: &nbsp;&nbsp;&nbsp;</strong>Foo
  </div>
</div>

CSS Transition Background Gradient（Hack）

1 个答案: