0

我正在尝试重新创建 tumblr 添加到仪表板上的新帖子图标的“反弹” 。

我一直在寻找如何使用background-position来创建反弹，但到目前为止还没有任何运气。

这里的其他问题在使用background然后尝试指定background-position但我根本没有使用background时遇到问题。

我并没有试图在这上面花很多时间，但现在我很好奇。

代码要点

密码笔

HTML

<div id="container">
 <div class="block blue">
  <div class="inblock light-green"></div>
 </div>
 <div class="block green">
  <div class="inblock orange"></div>
 </div>
 <div class="block yellow">
  <div class="inblock light-blue"></div>
 </div>
 <div class="block blue">
  <div class="inblock light-green"></div>
 </div>
 <div class="block green">
  <div class="inblock orange"></div>
 </div>
 <div class="block yellow">
  <div class="inblock light-blue"></div>
 </div>
</div>

CSS

#container {
  width:80%;
  height: 200px;
  padding-left:5em;
  background-color: #95A5A6;
}

.block {
  margin: 2em;
  height: 130px;
  width: 130px;
  float:left;
  border-radius:10px;
}

.block:hover > .inblock{
  background-color:#E74C3C;
  background-position: top;

}

.inblock {
  height: 80px;
  width: 80px;
  background-color:blue;
  margin: 1.5em;
}

.light-blue {
  background-color:#2980B9

}

.blue {
  background-color:#2C3E50;
}

.green {
  background-color:#27AE60;
}

.yellow {
  background-color:#F1C40F;
}

.orange {
  background-color:#E67E22;
}

.light-green {
  background-color:#2ECC71;
}
4

1 回答 1

1

从文档中：

background-position CSS 属性设置初始位置，相对于由 background-origin 为每个定义的背景图像定义的背景位置层。

如果您查看 HTML（使用开发人员工具，例如 Google Chrome 的开发人员工具），您会看到 Tumblr 实际上使用了一个精灵，然后使用该background-position属性使用 CSS3 过渡来上/下移动图标。

background-position由于没有设置属性，因此该属性在您提供的代码中没有做任何事情background-image。

如果您不想使用精灵/图像，您可以简单地使用 CSS3 的transform属性来创建“反弹”效果。我创建了一个 JSFiddle 来展示这个想法：http: //jsfiddle.net/7rsbr/

于 2013-03-06T02:13:14.263 回答