css - Fluent Design 卡片提升效果
问题描述
我想在悬停时将卡片提升效果添加到我的引导卡片中,并具有流畅的设计风格。你可以在微软设计网站上看到我的意思。
这是我尝试过的,但是缺少一些东西,我无法完全抓住它。
我试过:
.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
,请参阅 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>
推荐阅读
- python - os.mknod 返回 [error38] 函数未在 google colab 中实现
- vba - 在 Word 2010 中使用 VBA 制作适合页面的第一个文档
- react-native - 为什么我不能重新启动我的 react-native 应用程序?
- java - 为什么在 println() 之前不调用 start() 方法?
- android - 为什么我的应用程序的通知会自动清除?
- rest - 在 Swagger 上钻取模型对象
- haskell - 为什么这个 Haskell 程序实际上是并发的?
- google-cloud-platform - 为什么我托管在谷歌云上的应用程序会做一种向用户显示错误信息的缓存?
- qliksense - QlikSense 选择列出项目的数量
- javascript - jasmine TestBed 上的“NO_ERRORS_SCHEMA”导致运行完整的测试套件,尽管“fdescribe”