弹出式悬停

POP 在其主页上组成这些盒子的方框中具有这些酷炫的悬停效果。这些方框默认情况下具有白色背景，当您将鼠标悬停在它们上面时，一个深色背景会从后面滑上来，文字颜色会发生变化，文字会“弹出”一点。当您将鼠标移开时，深色背景会滑开，文字颜色会恢复，文字会稍微“下沉”一点。我认为我会尝试复制它，因为，你知道，太棒了 悬停。

演示

Check out this Pen!

HTML

每个区域都是一个“方框”。

<a href="#" class="box">
  <h2><span>Breaking news -</span> hippos are sorta dangerous</h2>
  <h3>Tonight at nine</h3>
</a>

CSS（背景）

默认方框的样式非常简单。悬停效果才是有趣的。POP 通过使用一个实际的元素来实现背景滑入，他们对该元素的位置进行了动画处理。如果我们对该功能仅在支持渐变的浏览器中有效感到满意，我们可以放弃该元素，只需对背景位置进行动画处理。

一个上半部分为白色，下半部分为黑色的背景很容易。

background: linear-gradient(
   white, white 50%, black 50%, black
);

然后，我们使它的高度是元素自身高度的两倍。

background-size: 100% 200%;

就像这样。

实际上，我们将背景的高度稍微超过 200%，因为正好在 200% 时，它仍然会将一小部分背景暴露到元素中（在 Chrome 中）。

.box {
  background: linear-gradient(
     white, white 50%, #333 50%, #333
  );
  transition: all 0.2s ease;
}
.box:hover {
  background-position: 100% 100%;
}

CSS（颜色）

默认文字颜色为黑色，因此根本不需要任何 CSS。在悬停时，我们调整颜色。span 发生变化只是一个有趣的惊喜，为派对增添了更多活力。

.box:hover h2 {
  color: #48ad26;
}
.box:hover h2 span {
  color: white;
}
.box:hover h3 {
  color: #999;
}

CSS（凸起）

这里棘手的地方是“凸起”发生在不同的方向，具体取决于它是悬停还是悬停离开。文字稍微移动然后恢复到原始位置的事实意味着 过渡 也无法帮助我们，这是 动画 领域。我们将为向上凸起制作一个 @keyframes，为向下凸起制作另一个。少量的填充将帮助我们，因为我们的 box-sizing 选择保持每个方框的高度相同。

@keyframes up-bump {
  0% { padding-top: 2em; }
  50% { padding-top: 1.5em; }
  100% { padding-top: 2em; }
}
@keyframes down-bump {
  0% { padding-top: 2em; }
  50% { padding-top: 2.5em; }
  100% { padding-top: 2em; }
}

默认情况下（在悬停离开时触发），.box 将获得向下凸起，:hover 将获得向上凸起。这与背景滑入滑出的方向相匹配。

.box {
  animation: down-bump 0.4s ease;
}
.box:hover {
  animation: up-bump 0.4s ease;
}

初始凸起修复

在初始状态添加该动画使其在页面加载时立即运行。这可能是一个很酷的效果，也可能很烦人。POP 网站在加载时不会运行它们。Matt Boldt 有一个好主意，那就是在鼠标悬停离开时添加离开凸起（通过一个类），这样它一开始就不会运行。

Check out this Pen!

在没有悬停功能的设备上……

它们是链接，并且没有隐藏任何重要内容，因此没什么大不了的。