实例

实现原理

给卡片添加 css3 新的过度属性(transition),鼠标移入和移出时都会触发这个过度属性,使卡片向上偏移一段距离,同时扩大卡片的背景阴影,从而实现卡片的浮动效果。

关键代码

.card-box .card {
transition: transform .2s, box-shadow .2s;
/* 省略部分代码 */
}
.card-box .card:hover {
transition: transform .2s, box-shadow .2s;
transform: translateY(-4px);
box-shadow: 4px 4px 8px rgba(0, 0, 0, .1), -4px -4px 8px rgba(0, 0, 0, .1);
}
文章结束 感谢阅读
本文作者: 文章标题:CSS3 实现卡片浮动效果
本文地址:https://lmwa.cn/archives/673.html
版权说明:若无注明,本文皆田小檬博客原创,转载请保留文章出处。
如果觉得我的文章对你有用,可以赞助本站,使本站更好的发展