流畅的设计卡提升效果

Question

我希望在悬停时使用流畅的设计风格将卡片提升效果添加到我的自举卡片中.您可以在微软设计网站上看到我的意思.

这是我尝试过的,但是有些东西缺失了,我无法抓住它.

我试过了:

.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

看起来像是翻译的效果是什么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>