流利的设计卡提升效果 [英] Fluent Design card lift effect

问题描述

我想在我的具有流畅设计风格的引导卡上添加纸牌提升效果悬停.您可以在 Microsoft设计网站上看到我的意思.

I want to add the card lift effect to my bootstrap cards with fluent design styles on hover. You can see what I mean on microsoft design website.

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

Here's what I tried, but there is something missing and I cannot quite grab it.

我尝试过:

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

非常感谢您的帮助.

推荐答案

transform: translate3d， box-shadow在:hover上更改时，元素本身会移动到不同的位置，从而产生效果.

When the box-shadow changes on :hover the element itself moves in a different position, delivering the effect.

因此，通过提供transform: translate3d(0px, -1px, 0px);(translation3d(x，y，z))，元素将1px 上移，并将阴影投射下移.

So by giving transform: translate3d(0px, -1px, 0px); ( translate3d(x,y,z) ), the element moves 1px up and shadow casts down.

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

这篇关于流利的设计卡提升效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！