我想为我的 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>
非常感谢您的帮助。
最佳答案
transform: translate3d
, see 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>
关于css - Fluent Design 卡片提升效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51184792/