1

我想在悬停时将卡片提升效果添加到我的引导卡片中，并具有流畅的设计风格。你可以在微软设计网站上看到我的意思。

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

我试过：

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

请感谢您的帮助。

4

3 回答 3

13

使效果看起来像是提升的原因是transform: translate3d，请参阅 translate3d w3cschools 文档。

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

因此，通过给出transform: translate3d(0px, -1px, 0px);( translate3d(x,y,z) )，元素向上移动1px ，阴影向下投射。

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

于 2018-07-05T06:57:31.520 回答
3

你错过了实际的向上运动。实现这一目标的方法有很多，例如：

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

从我的头顶。

于 2018-07-05T07:10:53.593 回答
2

为了达到这个效果，微软使用了多个 box-shadow，如下所示：

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>

于 2018-07-05T06:51:29.907 回答