CSS3 实现卡片浮动效果

田小檬

发布于 2023-08-24 10:39:31

1830

发布于 2023-08-24 10:39:31

文章被收录于专栏：田小檬博客田小檬博客

实例

查看实例

实现原理

给卡片添加 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);
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-06-23，如有侵权请联系 cloudcommunity@tencent.com 删除

css3