【问题标题】:Fluent Design card lift effectFluent Design 卡片提升效果
【发布时间】:2018-07-05 15:46:00
【问题描述】:

我想在悬停时将卡片提升效果添加到我的bootstrap cards with fluent design styles。你可以在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>

感谢您的帮助。

【问题讨论】:

    标签: css bootstrap-4 fluent-design fluent-kit


    【解决方案1】:

    transform: translate3dsee translate3d w3cschools docs 使效果看起来像是在提升。

    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>

    【讨论】:

    • 不错的一个。你认为我应该将它添加到我的Fluent Kit 库吗?另外,使用translate3d 只是为了将其提升1px 是不是有点矫枉过正?你能想出更好的解决方案吗?
    【解决方案2】:

    您错过了实际的向上运动。实现这一点的方法很多,例如:

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

    从我的头顶。

    【讨论】:

    • 那是另一个人说的,但他用translate3d代替。您认为哪个更适合这种特定效果?一个比另一个有什么优点/缺点?如果它被识别为 Fluent Design System,我想我可以将它添加到提到的库中,你怎么看?
    • 你必须运行性能测试来解决这个问题。我只使用'margin',因为它看起来更简单。。想看看你是怎么做的。
    • 好的,感谢您的见解,正如您所指出的,使用边距是有道理的 - 简单。我一定会在接下来的几天里告诉你我的决定,干杯。
    • margin-top: -1px 确实可以使用,但在这种情况下,它会将其下方的整个内容也向上移动 1px...transform: 只会在视觉上改变它,不会影响其他任何地方。
    【解决方案3】:

    为了达到这个效果,微软使用了多个 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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-04-04
      • 2022-12-19
      • 1970-01-01
      • 2021-07-09
      • 1970-01-01
      • 1970-01-01
      • 2021-05-15
      • 1970-01-01
      相关资源
      最近更新 更多