Fluent Design 卡片提升效果

Question

我想为我的 bootstrap cards with fluent design styles on hover. You can see what I mean on microsoft design website 添加卡片提升效果。

这是我试过的，但缺少一些东西，我无法完全抓住它。

我试过了：

.card {
  box-shadow: -3px 6px 5px 0px rgba(176,164,176,1);
  transition: all .3s ease-in-out;
}

.card:hover {
  box-shadow: -3px 18px 20px 0px rgba(99,89,99,1);
}

<div class="card" style="width:19.5rem">
  <div class="card-body">
   Lorem ipsum dolor sit ameta, card content
  </div>
</div>

非常感谢您的帮助。

Answer 1

为了达到这个效果，微软像这样使用多个框阴影：

box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px, rgba(0, 0, 0, 0.05) 0px 0.5px 1px;

悬停时：

box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px, rgba(0, 0, 0, 0.18) 0px 4px 11px;

.card {
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px, rgba(0, 0, 0, 0.05) 0px 0.5px 1px;
  transition: all .3s ease-in-out;
}

.card:hover {
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px, rgba(0, 0, 0, 0.18) 0px 4px 11px;
}

<div class="card" style="width:19.5rem">
  <div class="card-body">
   Lorem ipsum dolor sit ameta, card content
  </div>
</div>

Answer 2

使效果看起来像提升的是 transform: translate3d、see translate3d w3cschools docs。

当 box-shadow 在 :hover 上发生变化时，元素本身会移动到不同的位置，从而产生效果。

所以通过给出 transform: translate3d(0px, -1px, 0px); ( translate3d(x,y,z) )，元素移动 1px up 并且阴影投射向下.

.card {
  padding: 15px; /* JUST TO LOOK COOL */
  border: 1px solid #eee;  /* JUST TO LOOK COOL */
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px;
  transition: all .3s ease-in-out;
}

.card:hover {
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -1px, 0px);
}

<div class="card" style="width:19.5rem">
  <div class="card-body">
   Lorem ipsum dolor sit ameta, card content
  </div>
</div>

Answer 3

您错过了实际的向上运动。有很多方法可以实现，例如：

.card:hover {
  margin-top: -1px;
}

从我的头顶。

Fluent Design 卡片提升效果

Fluent Design card lift effect

css

bootstrap-4

fluent-design

fluent-kit